Wie gestaltet ihr eine Navigation?

ArtiHl · 03.03.2011

Ganz klar über eine ul.
Ich stell mir aber gerade die Frage ob es nicht Momente gibt wo es eventl. besser wäre eine div-Navi aufzubauen.
Folgendes Szenario:
Jeder Menüpunkt hat eine eigene Grafik.
Manche Menüpunkte haben aufklappbare Untermenüs, jedes Untermenü schaut anders aus.
Wäre es in diesem Falle nicht einfacher die ganze Sache mit div's und Klassen zu gestalten?
Sicher man könnte daher gehen und jedem li eine eigene Klasse zuordnen.
Allerdings könnte man so, meiner Meinung nach, das CSS übersichtler gestalten, erstrecht wenn man die Browserkompatibilität im Auge hat.

Oder was meint ihr?

MegaAdi · 03.03.2011

AW: Wie gestaltet ihr eine Navigation?

wieso nicht jedem li eine eigene Klasse geben? Die Browserkompatibilität ist da doch auch gegeben. Ob du nun ein Div nimmst und das mit klassen / ids bearbeitest oder direkt das li finde ich vom Script her das li schöner und übersichtlicher.
Hast du schon nen Code-Ansatz oder fängst du komplett neu an.

Wir machen hier im Forum gerade einen CSS-Contest wo wir uns u.A. mit gestaltung einer CSS-Navigation beschäftigen die rein aus <ul> / <li> besteht.

Schau mal auf ich denke das geht in deine Richtung oder? Ist meine Arbeit für den Contest und deswegen darfst du auch den Quelltext frei verwenden wenn du möchtest.

Gruß Adrian

sokie · 03.03.2011

AW: Wie gestaltet ihr eine Navigation?

es gibt aber auch gar keinen Grund, für ein Navigation(linkliste) ein anderes Strukturelement als die Liste zu benutzen. Man macht das ja nicht "weil man das so macht", sondern weil es darum geht eine logische Struktur der Elemente, und letztlich der Seite zu beschreiben.
Das Anordnen dieser Elemente, die Ausgestaltung ihres Aussehens ist Sache von CSS, und da ist es egal, ob der zu stylende Container nun ein li oder ein Div ist.
Zudem hast du im css mit dem Element Liste auch im css mehr natürliche Selektoren zur Verfügung - somit wird auch das css einfacher lesbar
beispiel

Code:

/*subnavigation listenelement*/
ul li ul li{
  border: 1px solid #dddddd;
}

ist doch besser zu verstehen als

Code:

/*subnavigation linkcontainer*/
div div div div{
  border: 1px solid #dddddd;
}

oder?

Eliteplayer · 03.03.2011

AW: Wie gestaltet ihr eine Navigation?

@MegaAndi:
Dein Contestvorschlag gefällt mir sehr sehr sehr sehr gut - genial, direkt gespeichert! Von dir kann ich viel lernen!
Ich dachte der weiße "Fleck" im Hintergrund ist ein Bild => Rechtsklick Hintergrundgrafik anzeigen geht nicht? whooot?! CSS Code angeschaut - wow! Woher weißt du sowas? Bzw. wo hast du sowas gelernt?

@ArtiHl:
Ich kann dir auch nur zu Listen raten, wie oben beschrieben!

MegaAdi · 03.03.2011

AW: Wie gestaltet ihr eine Navigation?

Ich lese gerne Foren etc.
Da ich mich derzeit viel mit HTML5 (Standart ab 2014) und CSS3 beschäftige kommt einem sowas dahergeflogen. Und ich Progge seit ich 12 bin =) Übung macht den Meister und es ist noch kein Meister vom Himmel gefallen =P Wichtig ist auch dass man immer die nötige Literatur zur Verfügung hat (ca. 59 Bücher bei mir im Regal rund um Webdesign)
Schade finde ich dass MS immer etwas hinterherhängt. Die lesen wohl nicht soviele Foren *fg*
Gerade so sachen wie radial-gradient sind sehr interessant da ich keine Hintergrundbilder mehr laden muss etc sondern alles schon im CSS Code dabei ist. optimiert die Webseite vor allem für "langsame" Internetverbindungen (Surft heutzutage noch jmd mit Modem?!?!?)

EDIT: Ich denke mal

Bitte kostenlos registrieren, damit du die Links siehst.

könnte dich interessieren (eglish)

ArtiHl · 03.03.2011

AW: Wie gestaltet ihr eine Navigation?

Ja klar, ich benutze auch immer Listen für Navigationen, ich habe aber in letzter Zeit immer häufiger gesehen das div's benutzt werden, weshalb ich mir das ganze mal angeschaut habe und hier mal nach Meinungen frage.
Normaler Weise würde ich eine Navi so machen:

Code:

<div class="Navi">
   <ul id="Hauptnavi">
        <li id="Link1"><a href="#">Link1</a>
             <ul class="Haupt-sub1">
                   <li><a href="#">Link1-1</a></li>
             </ul>
        </li>
        <li id="Link2"><a href="#">Link2</a></li>
        <li id="Link3"><a href="#">Link3</a></li>
        <li id="Link4"><a href="#">Link4</a></li>
   </ul>
</div>

Nun kann man schön mit CSS loslegen.
Aber wie gesagt gibt es viele die div's benutzten, grad in den letzten Tagen habe ich das öfter gesehen und hab gedacht ich habe was verpasst.
Und einige haben auch gesagt es sei mit div übersichtlicher.
Aber gut dann weiß ich ja bescheid

.

Danke euch.

@MegaAdi
Finde deine Umsetzung auch schön.
Hatte mich zwar zum Contest angemeldet habe aber leider keine Zeit was umsetzen.
Wünsch dir viel Glück und Erfolg

.

masa · 11.03.2011

AW: Wie gestaltet ihr eine Navigation?

Du kannst eine Navigation auch unterstützend mit Javascript herstellen. Sieht auch ordentlich aus.
Viel Spass
Beisspiel:
2leveltab.js
-----------------------------------------------
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}

function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems.getAttribute("rel")){
menuitems.setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems.getAttribute("rel") //store ids of submenus of tab menu
if (menuitems.className=="selected")
showsubmenu(tabid, menuitems.getAttribute("rel"))
menuitems.getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
--------------------------------------------------------------------------------------------------
2leveltab.css
------------------
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left;
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}

.basictab li a:visited{
color: black;
}

.basictab li a:hover{
background-color: #dbffff;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}

.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #ebffff;
}
-----------------------------------------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="2leveltab.css" />

<script type="text/javascript" src="2leveltab.js"></script>
</head>

<body>
<ul id="maintab" class="basictab">
<li><a href="">Home</a></li>
<li class="selected" rel="tutorials"><a href="#">Link1</a></li>
<li rel="references"><a href="#">Link2▼</a></li>
<li><a href="">Link3</a></li>
</ul>

<div id="references" class="submenustyle">
<a href="">Unterseite1</a>
<a href="">Unterseite2</a>
<a href="">Unterseite3</a>
</div>

<div id="tutorials" class="submenustyle">
<a href="">Tutorials1</a>
<a href="">Tutorials2</a>
<a href="">Tutorials3</a>
<a href="">Tutorials4</a>
</div>

<script type="text/javascript">

initalizetab("maintab")
</script>
</body>

Laphory · 12.03.2011

AW: Wie gestaltet ihr eine Navigation?

Heyho
Also ich erstell meine Menüpunkte auch immer mit ul usw, ich denk aber dass das auch mit tabellen geht oO habs noch nie ausprobiert, wurde mir aber mal vorgeschlagen.

sash79 · 26.03.2011

AW: Wie gestaltet ihr eine Navigation?

Selbstverständlich geht das auch mit Tabellen. Aber wir leben doch nicht mehr in der Steinzeit :-D

Auch gerade in Hinsicht von Semantischem HTML ist es meiner Meinung nach unumgänglich seine Navi mit Listen zu machen und dank css sind gestalterisch ja auch kaum Grenzen gesetzt!

MegaAdi · 26.03.2011

AW: Wie gestaltet ihr eine Navigation?

sash: gratulation zum ersten posting nach nem halben jahr

es geht mit fast allem. Aber wie schon gesagt.. ul/li ist da am übersichtlichsten und systematischstem.. und wenn du dann dein code nach nem Jahr ankuckst weiste immernoch bescheid was was is...

Gruß Adrian