Zum Inhalt springen

CSS Menü

Erstellt am 24. Mai 2006 · 38 Antworten · letzte Antwort am 26. April 2008 · Seite 1 von 2

Tags: Frage

littlejoe ·

Hallo zusammen,

ich versuche grade folgendes Menü in typo3 umzusetzten:

http://www.cssplay.co.uk/menus/final_drop.html

Bisher hat auch alles funktioniert bis auf 1 Problem für die Funktion im IE:

Der HTML Code muß folgendermaßen lauten, ich bekomme aber das von mir !!!! markierte </a>-Tag nicht aus dem Code. Dieses ist zu viel.

<div class="menu">

<ul>
<li><a href="#">Level 1 a</a></li>
<li><a class="drop" href="#">Level 1 b</a>!!!!
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>

<ul>
<li><a href="#">Level 2 a</a></li>
<li><a href="#">Level 2 b</a></li>
<li><a class="drop" href="#">Level 2 c</a>!!!!

<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>

<ul>
<li><a href="#">Level 3 a</a></li>
<li><a href="#">Level 3 b</a></li>
<li><a href="#">Level 3 c</a></li>
</ul>

</td></tr></table>

<!--[if lte IE 6]></a><![endif]-->

</li>

<li><a href="#">Level 2 d</a></li>
<li><a href="#">Level 2 e</a></li>
</ul>

</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
-----------------------------------------------------------------------------------------------------------

Das Typoscript sieht bis dato so aus:

page.10.subparts.menu = HMENU  
page.10.subparts.menu {

      special = directory
      special.value = 458
      wrap = <h6>Navigation Produkte:</h6> |

       1 = TMENU
       1 {
           expAll = 1
           wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
           noBlur = 1
           NO = 1
           NO.wrapItemAndSub = <li>|</li>
           IFSUB = 1
           IFSUB {
                  wrapItemAndSub = <li>|</li>
                  ATagParams = class=drop
                  linkWrap = |<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>         
                  }
                  ACTIFSUB < .IFSUB
           }
           2 < .1
           2.wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]--> 
           3 < .2
           4 < .2
         }

littlejoe ·

Hier nun das fertige TypoScript für das CSS Menu "THE ULTIMATE CSS ONLY DROPDOWN MENU" (http://www.cssplay.co.uk/menus/final_drop.html).

CSS und HTML File kann vom angegebenen Link heruntergeladen werden.

page.10.subparts.pmenu = HMENU  
page.10.subparts.pmenu {
special = directory
special.value = 458 # Gebe hier an wo das Menü starten soll
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]--> 
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}
ACTIFSUB < .IFSUB
}
2 < .1	
3 < .2
4 < .3
5 < .4
6 < .5 
# Falls mehr Ebenen vorhanden sind Liste ergänzen.
}

Wünsche viel Spaß damit!

littlejoe ·

Achtung Codeschnipsel nicht vergessen:

<!--###DOCUMENT_HEADER###-->
<link rel="stylesheet" type="text/css" href="css/menu.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/menu_ie.css" />
<![endif]-->

<!--###DOCUMENT_HEADER###-->

.. und auch beide css Dateien herunterladen.
--------

Bei einem direkt darunter befindlichen Flash sollte dieses einen transparentem "Background" haben und das Div #Menu kann bei Überlagerung anderer Div-Container mit #menu {z-index:100;} hervorgehoben werden.

littlejoe ·

Ich wurde gebeten den ganzen Code komplett nochmal zur Verfügung zu stellen
Das Menü funktioniert bei mir einwandfrei im IE und Firefox, Opera ... ich kann die Seite momentan nur noch posten, weil sie noch nicht online steht:

HTML Code:

<!--###DOCUMENT_HEADER###-->
<link rel="stylesheet" type="text/css" href="css/pmenu.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/pmenu_ie.css" />
<![endif]-->
<!--###DOCUMENT_HEADER###-->

<!-- ###DOCUMENT_BODY### -->
<div id="pmenu"> ###pmenu###</div>
<!-- ###DOCUMENT_BODY### ENDE -->

CSS Datei (pmenu.css:

 /* common styling */
#pmenu 			{
				display:block; 
				position:relative; 
				z-index:200;
				background:#797979;	
				height:1.9em; 
				}

#pmenu ul 			{
				padding:0; 
				margin:0;
				}

#pmenu ul li 			{
				float:left;
				position:relative;
				background-image:none;
				margin:0;
				padding:0;
				}

#pmenu ul li a, #pmenu ul li a:visited {
				display:block; 
				text-decoration:none; 
				font-weight:bold;
				color:#FFF; 
				width:99px; 
				height:1.9em; 
				background:#797979; 
				border:1px solid #fff; 
				border-width:0 1px 0 0; 
				padding-left:15px; 
				line-height:1.8em;
				}

* html #pmenu ul li a, #pmenu ul li a:visited {
				width:115px;
				w\idth:99px;
				}

#pmenu ul li ul 		{
				display: none;
				}

table 				{
				margin:-1px; 
				border-collapse:collapse;
				font-size:1em;
				}

/* specific to non IE browsers */
#pmenu ul li:hover a 	{
				color:#fff; 
				background:#6A0000;
				}

#pmenu ul li:hover ul 	{
				display:block; 
				position:absolute; 
				top:1.8em;
				margin-top:1px;
				left:-1px; 
				border-bottom:1px;
				width:210px;
				}

#pmenu ul li:hover ul li ul {
				display: none;
				}

#pmenu ul li:hover ul li a {
				margin-bottom:-1px;
				display:block; 
				background:transparent  url(../images/opaque-no.png);
				height:auto; 
				font-size:1em;
				line-height:1.2em; 
				padding:5px 0 5px 14px; 
				width:195px;
				border-width:1px 1px 1px; 0; 
				}
#pmenu ul li:hover ul li a.drop {
				background:transparent  url(../images/opaque-sub.png);
				background-position:bottom;
				}

#pmenu ul li:hover ul li a:hover {
				background:transparent  url(../images/opaque-ro.png); 
				color:#000;
				}
#pmenu ul li:hover ul li:hover ul {
				display:block; 
				position:absolute; 
				left:210px; 
				top:0;
				width:210px;
				}

#pmenu ul li:hover ul li:hover ul.left {
				/*left:-200px;*/
				}

CSS-Datei für IE (pmenu_ie.css)

#pmenu ul li a:hover 	{
				color:#fff; 
				background:#6A0000;
				}
#pmenu ul li a:hover ul 	{
				display:block; 
				position:absolute; 
				top:1.8em;
				margin-top:1px;
				left:-1px; 
				border-bottom:1px solid #fff;
				width:210px;
				}
#pmenu ul li a:hover ul li a {
				margin-bottom:-1px;
				display:block; 
				background:transparent  url(../images/opaque-no.png);
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				height:auto;
				font-size:1em;
				line-height: 1.2em;
				padding:5px 0 5px 14px; 
				width:195px;
				border-width:1px;

				}
#pmenu ul li a:hover ul li a.drop {
				background-position:bottom;
				background:transparent  url(../images/opaque-sub.png) bottom;
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				}
#pmenu ul li a:hover ul li a ul {
				visibility:hidden; 
				position:absolute; 
				height:0; 
				width:0;
				}

#pmenu ul li a:hover ul li a:hover {
				color: Black;
				background:transparent  url(../images/opaque-ro.png);
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				}

#pmenu ul li a:hover ul li a:hover ul {
				visibility:visible; 
				display:block; 
				position:absolute; 
				left:210px; 
				top:0;
				width:210px;
				}

#pmenu ul li a:hover ul li a:hover ul.left {
/*left:-150px;*/
}

TS Code:

page.10.subparts.pmenu = HMENU 
page.10.subparts.pmenu {
special = directory
special.value = 458 # Gebe hier an wo das Menü starten soll
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}
ACTIFSUB < .IFSUB
}
2 < .1 
3 < .2
4 < .3
5 < .4
6 < .5
# Falls mehr Ebenen vorhanden sind Liste ergänzen.
}
littlejoe ·

Wenn das Menü nicht bei id 1 beginnen soll sondern an einem bestimmten Punkt vom Seitenbaum gibt man das an dieser Stelle an (ID der Page bei der die Navigationsstruktur starten soll).

TakaTuka ·

Hi littlejoe,

zunächst mal Danke für die Inspiration mit dem Menü von cssplay und deiner Umsetzung in typo3. Ich habe erst vor ca 6 Wochen mit T3 angefangen und habe ein Frage zur Weitergabe der Seiten-ID (field:uid) an dieser Stelle deines Scripts:

IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}

Ich benutze auf meiner Testseite RealURL was auch soweit funktioniert, jedoch gibt er mir in deinem Menü in der Adresszeile nur den link mit "...id=xx" aus, ist soweit auch klar da ich ja sage das er die "uid" nutzen soll.
Wie mache ich jetzt aber über TypoScript meiner Seite klar, dass sie auch an dieser Stelle (href="index.php?id={field:uid}) RealUrL oder statische URLs nutzt und übergibt?

Danke Gruß
TakaTuka

ArminB ·

Guten Morgen,

ich stelle hier mein TS auch mal rein.

Der von littlejoe ist nicht valide (Wobei man streiten kann, ob der erzeugte Quelltext eh valide sein kann, tabellen in a-tags sind ja nicht konform) zuminmdest wird valider Quelltext vorgetäuscht.. 😃

temp.css_menu = HMENU
temp.css_menu {
	
	special = directory
	special.value = 8
 	wrap = <div class="menu"> | </div>
	# Hauptmenue
	1 = TMENU
	1 {
	    wrap = <ul> | </ul>
		expAll = 1
		
		NO.ATagTitle.field = subtitle//title
		NO.wrapItemAndSub = <li> | </li> 
		
		
      	IFSUB = 1
		IFSUB {
			wrapItemAndSub = <li> | </li>
			allWrap = | <!--<![endif]-->
			linkWrap = |<!--[if IE 7]><!-->
   			ATagBeforeWrap = 1
		}
	}
	
	2 = TMENU
	2 {
		wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
		expAll = 1
		
		NO.ATagTitle.field = subtitle//title
		NO.wrapItemAndSub = <li> | </li> 
		
		IFSUB = 1
		IFSUB {
			wrapItemAndSub = <li> | </li>
			allWrap = | <!--<![endif]-->
			linkWrap = |<!--[if IE 7]><!-->
   			ATagBeforeWrap = 1
			ATagParams = class=drop
		}
	
	}
	
	3 < .2
	4 < .2
}

@TakaTuka
In meiner Lösung werden Links rchtig dargestellt. Links sollte in TS auch mit typolink erzeugt werden.

Armin

darkdesire ·

Vielen Dank an Armin

Dies ist wirklich ne funktionierende Lösung endlich, wie lange hab ich versucht, gesucht, rumgebastelt an diesem teil

Danke Danke :p

TakaTuka ·

Hallo Armin,

vielen Dank für dein TS, konnte es mir leider erst jetzt anschauen. Sieht super aus und bringt mich endlich mal ein Schritt weiter. :p

Viele Grüße
TakaTuka

biz1968 ·

Hallo Armin,

wie lässt sich das Menü so erweitern, daß die aktiven Punkte des horizontalen Menüs in einer definierten Farbe dargestellt werden ?

Grüsse Ralf

just2b ·
biz1968 schrieb

Hallo Armin,

wie lässt sich das Menü so erweitern, daß die aktiven Punkte des horizontalen Menüs in einer definierten Farbe dargestellt werden ?

Grüsse Ralf

Hallo, hier hilft der Zustand ACT

georg

biz1968 ·

Hallo Georg,
das ist schon klar,

im Firefox funktioniert's auch,
aber der IE (wie immer)
#angry#

http://212.82.35.226/projekte/dfgb/preziehs_home.html?&L=0

temp.nav = HMENU
temp.nav {
    special = directory
    special.value = 367
    excludeUidList = 
    wrap = |



1 = TMENU
1 {
    expAll = 1
    wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>



    IFSUB = 1
    IFSUB {
             allWrap.dataWrap = <li><a class="sub" href="{field:uid}.html?&L=0">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
             doNotShowLink = 1  
           }

    ACTIFSUB = 1
    ACTIFSUB {
             allWrap.dataWrap = <li><a class="actifsub" href="{field:uid}.html?&L=0">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
             doNotShowLink = 1  
           }

    ACT = 1
    ACT {
             allWrap.dataWrap = <li><a class="act" href="{field:uid}.html?&L=0">{field:title}</a> 
             doNotShowLink = 1  
           }

    }


2 < .1 
3 < .2
4 < .3
5 < .4
6 < .5
}

/* common styling */
#nav {
display:block;
font-size: 73%;

margin: 0;
padding: 0;

padding-left: 80px;

z-index: 9999;

}

#nav ul {
padding:0;
margin:0;
}

#nav ul li {
float:left;
position:relative;
margin:0;
padding:0;
margin-right: 10px;
}

#nav ul li a,
#nav ul li a:visited {
display:block;
text-decoration:none;
font-weight:bolder;
width:120px;
height:30px;
color:#e28500;
background-color: #fbfafa;
border-left:10px solid #e28500;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
line-height:1em;
}

html #nav ul li a,
#nav ul li a:visited {
width:131px;
w\idth:115px;

}

#nav ul li ul {
display: none;
}

table {
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */

html #nav ul li a.act:link,
html #nav ul li a.act:visited {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;
}

#nav ul li a.actifsub,
#nav ul li:link a.actifsub,
#nav ul li:hover a.actifsub,
#nav ul li:visited a.actifsub {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;
}

#nav ul li:hover a {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;

}

/******************************/
/************* NAV EBENE 1**********/
/******************************/

#nav ul li:hover ul {
display:block;
position:absolute;
top:35px;
left:0px;
width:170px;
}

#nav ul li:hover ul li ul {
display: none; /* triggering durch hover*/
}

#nav ul li:hover ul li a {
display:block;
height:auto;
line-height:1em;
padding:5px 0 5px 5px;
width:170px;
border-left:10px solid #e28500;
color: #e28500;
background-color: #fbfafa;
}

#nav ul li:hover ul li a:hover {
color: #ffffff;
background-color: #e28500;
border-left:10px solid #ffffff;

}

/******************************/
/************* NAV EBENE 2**********/
/******************************/

#nav ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:185px;
top:0;
width:170px;
}

Grüsse Ralf

ArminB ·

moin Ralf,

wenn ich das auf den esten Blick sehe zerhaust du den ganzen Quelltext. Es fehlt wrapItemAndSub etc.pp

Du musst nur bei meinem TS oben mit einfügen:

  ACT < .NO
  ACT = 1
  ACT.ATagParams = class=drop
  
  ACTIFSUB < .IFSUB
  ACTIFSUB.ATagParams = class=drop

Evtl. Klassennamen anpassen und halt noch das passende CSS anlegen

Armin

biz1968 ·

Hallo Armin,

habe jetzt Dein TS Scripting übernommen und den Zusatzpart eingefügt

temp.nav = HMENU
temp.nav {
        
        special = directory
        special.value = 6634
        excludeUidList = 6649,6648
        wrap = <div class="nav"> | </div>
        # Hauptmenue
        1 = TMENU
        1 {
            wrap = <ul> | </ul>
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                
        IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }

        ACT < .NO
        ACT = 1
        ACT.ATagParams = class=dropact
  
       ACTIFSUB < .IFSUB
       ACTIFSUB.ATagParams = class=dropact

        }
        
        2 = TMENU
        2 {
                wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                  ATagBeforeWrap = 1
                  ATagParams = class=drop
                }

        ACT < .NO
        ACT = 1
        ACT.ATagParams = class=dropact
  
       ACTIFSUB < .IFSUB
       ACTIFSUB.ATagParams = class=dropact

        
        }
        
        3 < .2
        4 < .2
}

im standard CSS zusätzlich

#nav ul li a.dropact {
background-color: #003a77;
color: #ffffff;
}

#nav ul li:hover ul li a.dropact {
background-color: #003a77;
color: #ffffff;
}

funktioniert in Firefox ganz wunderbar

doch was kommt ins CSS für die Hauptnavigation im IE rein ?
Dort funktionierts nämlich nicht !

Das bischen CSS Anpassung ist mein Problem

#angry#

Grüsse Ralf

mlehner ·

Hallo Leute!

Ich bin beim Thema Templates und dropdown Menu absoluter Neuling und habe trotz der vielen Beispiele noch keines zum Laufen gebracht.

Auch der Beitrag von littlejoe auf Seite1 mit dem kompletten Code funktioniert nicht und ich kann mir auch nicht vorstellen dass das jemals läuft, denn:
Das Beispiel für den HTML-Code ist ja angegeben und ich geh mal davon aus, dass es sich dabei um das Template handelt. Dieses Template wird aber nirgends im Code eingebunden, wie soll das also funktionieren?

Gibt es irgendwo ein wirklich komplettes Beispiel, dass auch jeder einbinden kann?

Ich habe keine Lust mich wochenlang mit Templates und Dropdown zu beschäftigen, denn wenn es einmal eingerichtet ist wird es nie wieder geändert!

Viele Grüsse

elfe111 ·

Hallo mlehner,

das kann schon funktionieren wenn man weiß wie Template und Stylesheet eingebunden werden - hier wurde nur das TS für das entsprechende Menü selbst besprochen und gepostet. Anpassungen sind natürlich nötig wenn es auf Deiner oder einer anderen Seite laufen soll.

Eine Lösung die für alle passt gibt es nicht wirklich und nicht alle hier im Forum ändern ihr Menü nie mehr oder erstellen nur eine einzige Homepage.
Und so ist es sicher doch gut wenn man sich ein bischen mehr damit beschäftigt - Fragen die dann aufkommen können hier im Forum beantwortet werden - wie kann man nun Dir helfen?

Gruß
elfe111