So einfach ist es ein einfaches Menu mit Unterpunken auf seine Seite zu bringen
Stylesheet CSS Code
<![CDATA[
#nav, #nav ul {
/*float:right;*/
float: left;
/*width: 36em;*/
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #F984EF;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a, b {
display: block;
/* width: 10em;
w\idth: 6em;
color: #000000;*/
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.mChild,b.mChild {
background: url(/img/rightarrow2.gif) center right no-repeat;
}
#nav li {
float: left;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 0.90em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #DDDDDD;
font-weight: bold;
}
#nav .erster {border-left:1px solid #000000}
#nav .trenner {border-right:1px solid #000000}
]]>
Javascript Code nur das mehr nicht!
<![CDATA[
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]]]><![CDATA[></script>
]]>
HTML Beispiel wie auf dieser Seite
<![CDATA[
<ul id="nav">
<li class="erster trenner"><a href="/">Startseite</a></li>
<li class=trenner><a href="#">Percoidei</a>
<ul>
<li><a href="/css/navi.html" class="mChild">diese Seite</a>
<ul>
<li><a href="#" class="mChild">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="mChild">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li class=trenner><a href="#">Anabantoidei</a>
<ul>
<li><a href="#" class="mChild">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#" class="mChild">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li class=trenner><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul>
]]>
Ich haben es klar meiner Homepage etwas farblich angepasst.
Das schöne ist die einfach Pflege der Links, das schlanke Javascript.
Weiter ist der farblichen Anpassung keine Grenzen gesetzt und es geht mit jedem Browser.
Klar habe ich via Google mit vielen Keywords "Pulldown, Dropdowns, Menu, JS, usw" gesucht doch der entscheidende Hinweis kam
von barrierefrei.e-workers.de und dem Hinweis
nach "suckerfish" zu googeln. Bei www.htmldog.com "example" bin ich dann fündig geworden.
Wie du im "CSS" sehen kannst habe ich schon etwas probiert das Menu recht "< UL >"
auszurichten ist aber noch etwas fummelei das überlasse ich dir für eine Punkt ohne Link "href" habe ich den "< b >" TAG eingefügt.
Bald kannst du auch dein feedback blogen doch das dauert noch ein wenig arbeite noch dran.
Seit dem 28.04.11 ist es soweit habe das
Kriebus-Forum eröffnet.
Wenn du noch etwas Unterhaltung bei der Arbeit brauchst unser Playliste auf
crs4all.de oder andere hier ist immer gepflegt und für jeden was dabei mit ausreichender länge das man nicht ständig am suchen ist.
Viel Spaß
Frank