✔ Technische Umsetzung einer Navigation mit Submenü

Maik · 9. Juni 2008

Centering Float Left Menus (2. Beispiel "a centered floated left menu (unknown width)")

mfg Maik

Fuu · 9. Juni 2008

dankeschön ^^

Fuu · 10. Juni 2008

da bin ich mal wieder -.-

Ich wollte nun anfangen mit der subnavi und hatte gleich das zweite Problem. Ich hab ja den Befehl float benutzt um die Punkte in die Horizontale zu bringen aber nun wird meine subnavi neben der main dargestellt.
Ich hab gehört es gibt den Befehl clear, der dies unterbinden soll, allerdings hab ich in meinem Buch, bei selfhtml und auch nirgenswo im Netz ein Hinweis gefunden wie genau der Befehl nun geschrieben wird. jeder benutzt ihn anders in anderen tags usw und die funktionieren bei mir nicht

Fuu

Maik · 10. Juni 2008

Hi,

wenn du dich an meinem Vorschlag hälst, die Listenpunkte mit display:inline auszuzeichnen, sollte das von dir beschriebene Problem nicht auftauchen.

Ansonsten solltest du aus dem CSS-Code kein Staatsgeheimnis machen, und ihn hier endlich mal vollständig zeigen, damit man sich ein genaues Bild von der Situation machen kann.

mfg Maik

Fuu · 10. Juni 2008

1.ich weiß nicht ob ich das so gemacht hab wie du dir das gedacht hast, ich hab so lange mit den infos des linkes rumgefummelt bis es geklappt hat ...

2ich mach kein Geheimnis aus meinem Quelltext ich bin nur der Meinung gelesen zu haben das man hier keine kompletten Quellcodes posten darf

3wunder dich nicht ich bin schon am rumbasteln der subnavi also sind da einige dinge drin, die erstmal so kein sinn ergeben (wer weiß schon ob sie das jemals tun

)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS-Navigation</title>

<style type="text/css">

div#header {
background-image:url(../bilder%20f%C3%BCr%20HA/food.gif);
height:100px;
}

ul#main, div#header {
width:900px;
margin:0 auto;
}

ul#main li {
display:inline;
list-style:none;
}

ul#main a {
float:left;
width: 150px;
height:100px;
margin:3px 0 0 0;
}

ul#main a span, div#header span{
display:none;
}

ul#main li a#home:link, ul#main li a#link_1:visited {
background-image:url(home.jpg);
}
ul#main li a#home:hover, ul#main li#current a#home {
background-image:url(home_aktiv.gif);
}

ul#main li a#sport:link, ul#main li a#sport:visited {
background-image:url(sport.gif);
}
ul#main li a#sport:hover, ul#main li#current a#sport {
background-image:url(sport_aktiv.gif);
}

ul#main li a#food:link, ul#main li a#food:visited {
background-image:url(food.gif);
}
ul#main li a#food:hover, ul#main li#current a#food {
background-image:url(food_aktiv.gif);
}

ul#main li a#health:link, ul#main li a#health:visited {
background-image:url(health.gif);
}
ul#main li a#health:hover, ul#main li#current a#health {
background-image:url(health_aktiv.gif);
}

ul#main li a#sex:link, ul#main li a#sex:visited {
background-image:url(sex.gif);
}
ul#main li a#sex:hover, ul#main li#current a#sex {
background-image:url(sex_aktiv.gif);
}

ul#main li a#travel:link, ul#main li a#travel:visited {
background-image:url(travel.gif);
}

ul#main li a#travel:hover, ul#main li#current a#travel {
background-image:url(travel_aktiv.gif);
}

ul#sportsub li {
list-style:none;
display:inline;
}
</style>

</head>
<body>
 
<div id="header">bild</div>
<ul id="main">
<li id="current"><a href="#" id="home">home</a></li>
<li><a href="#" id="sport">sport</a></li>
<li><a href="#" id="food">food</a></li>
<li><a href="#" id="health">health</a></li>
<li><a href="#" id="sex">sex</a></li>
<li><a href="#" id="travel">sex</a></li>

</ul>
<ul id="sportsub">
<li><a href="" id="laufen">laufen</a></li>
<li><a href="" id="studiotraining">studiotraining</a></li>
<li><a href="" id="funsport">funsport</a></li>
<li><a href="" id="laufstrecken">laufstrecken</a></li>
<li><a href="" id="studiofinder">studiofinder</a></li>
</ul>
</body>
</html>

ich hab vorher noch nie was mit CSS gemacht also kann das durchaus sein das dort falsche, sinnfreie oder überflüssige codes drin sind

Maik · 10. Juni 2008

Hi,

das wäre mir neu, dass die Veröffentlichung des vollständigen Quellcodes in unserem Forum unerwünscht ist.

Zu deinem Quellcode: ein Submenü wird innerhalb, und nicht außerhalb des Hauptmenüs notiert:

Code:

<ul id="main">
    <li id="current"><a href="#" id="home"><span>home</span></a></li>
    <li><a href="#" id="sport"><span>sport</span></a>
           <ul id="sportsub">
               <li><a href="#" id="laufen"><span>laufen</span></a></li>
               <li><a href="#" id="studiotraining"><span>studiotraining</span></a></li>
               <li><a href="#" id="funsport"><span>funsport</span></a></li>
               <li><a href="#" id="laufstrecken"><span>laufstrecken</span></a></li>
               <li><a href="#" id="studiofinder"><span>studiofinder</span></a></li>
           </ul>
    </li><!-- hier endet der Menüpunkt "sport" -->
    <li><a href="#" id="food"><span>food</span></a></li>
    <li><a href="#" id="health"><span>health</span></a></li>
    <li><a href="#" id="sex"><span>sex</span></a></li>
    <li><a href="#" id="travel"><span>sex</span></a></li>
</ul>

denn der grundsätzliche Selektor und die Regel zum Einblenden des Untermenüs lautet in deinem Markup ul#main li:hover ul { display:block; }, wobei mit dem letztgenannten ul-Element ein Nachfahre des li-Elements gemeint ist.

Damit das Untermenü aber nun nicht, wie von dir beschrieben, direkt rechts neben dem Hauptmenüpunkt erscheint, wird es mit einer absoluten Positionierung aus dem Textfluss genommen:

Code:

ul#main li ul {
display:none;
}

ul#main li:hover ul {
display:block;
position:absolute;
left:150px;
top:100px;
}

Mit der linken Positionsangaben "beginnt" das Submenü direkt unter seinem Obermenüpunkt. Falls es links außen beginnen soll, setzt du den Wert eben auf "0".

Damit sich die Positionsangaben aber nicht auf den Viewport des Browserfensters, sondern auf die Grenzen des ul-Elternelements beziehen, wird dieses relativ positioniert:

Code:

ul#main {
position:relative;
}

Weitere kleine Feinheiten, die ich noch im Quellcode eingefügt habe, sind hier fett markiert:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS-Navigation</title>

<style type="text/css">
div#wrapper {
width:900px;
margin:0 auto;
}

div#header {
background-image:url(../bilder%20f%C3%BCr%20HA/food.gif);
height:100px;
}

ul#main {
position:relative;
}

ul#main, ul#main ul {
margin:0;
padding:0;
}

ul#main li {
display:inline;
list-style:none;
}

ul#main a {
float:left;
width: 150px;
height:100px;
margin:3px 0 0 0;
}

ul#main a span, div#header span{
display:none;
}

ul#main li a#home:link, ul#main li a#link_1:visited {
background-image:url(home.jpg);
}
ul#main li a#home:hover, ul#main li#current a#home {
background-image:url(home_aktiv.gif);
}


ul#main li a#sport:link, ul#main li a#sport:visited {
background-image:url(sport.gif);
}
ul#main li a#sport:hover, ul#main li#current a#sport {
background-image:url(sport_aktiv.gif);
}


ul#main li a#food:link, ul#main li a#food:visited {
background-image:url(food.gif);
}
ul#main li a#food:hover, ul#main li#current a#food {
background-image:url(food_aktiv.gif);
}


ul#main li a#health:link, ul#main li a#health:visited {
background-image:url(health.gif);
}
ul#main li a#health:hover, ul#main li#current a#health {
background-image:url(health_aktiv.gif);
}


ul#main li a#sex:link, ul#main li a#sex:visited {
background-image:url(sex.gif);
}
ul#main li a#sex:hover, ul#main li#current a#sex {
background-image:url(sex_aktiv.gif);
}


ul#main li a#travel:link, ul#main li a#travel:visited {
background-image:url(travel.gif);
}

ul#main li a#travel:hover, ul#main li#current a#travel {
background-image:url(travel_aktiv.gif);
}

ul#main li ul {
display:none;
}

ul#main li:hover ul {
display:block;
position:absolute;
left:150px;
top:100px;
}
</style>

</head>
<body>

<div id="wrapper">
     <div id="header"><span>bild</span></div>
     <ul id="main">
         <li id="current"><a href="#" id="home"><span>home</span></a></li>
         <li><a href="#" id="sport"><span>sport</span></a>
                <ul id="sportsub">
                    <li><a href="#" id="laufen"><span>laufen</span></a></li>
                    <li><a href="#" id="studiotraining"><span>studiotraining</span></a></li>
                    <li><a href="#" id="funsport"><span>funsport</span></a></li>
                    <li><a href="#" id="laufstrecken"><span>laufstrecken</span></a></li>
                    <li><a href="#" id="studiofinder"><span>studiofinder</span></a></li>
                </ul>
         </li>
         <li><a href="#" id="food"><span>food</span></a></li>
         <li><a href="#" id="health"><span>health</span></a></li>
         <li><a href="#" id="sex"><span>sex</span></a></li>
         <li><a href="#" id="travel"><span>sex</span></a></li>
     </ul>
</div>

</body>
</html>

Falls du die Vorgängerversionen des IE7 berücksichtigen möchtest, muss du dich für einen Workaround entscheiden, denn die verwendete allgemeine Pseudoklasse li:hover wird vom IE6 und älter nicht unterstützt, und somit das Submenü nicht eingeblendet.

Entweder greifst du auf Suckerfish Dropdowns (JS) zurück, oder du schaust dich doch mal bei Stu Nicholls' Dropline-Menus (Kategorie: "Menus - Multi-Level CSS Only") um, deren Technik auf reinem CSS beruht.

mfg Maik

P.S. Im erweiterten Editor findest du drei Buttons, um deine Quellcode-Angaben in Highlight-Tags zu packen. Es wäre nett, wenn du diese zukünftig nutzen würdest. Vielen Dank!

Fuu · 11. Juni 2008

ui das is ja ne menge

dann werd ich mich da mal ranmachen -^^-
vielen dank für die mühe

Fuu

Fuu · 12. Juni 2008

da bin ich wieder rechtzeitig zum Brunch ^^

gibt es eine möglichkeit, wenn man wirklich nur CSS benutzt, eine art Seitenwechsel zu imitieren ?

Erklärungsversuche

:
Die Buttons haben ja nun ein Rollover, sieht auch alles super toll aus, aber es kommt noch ein horizontales Submenu das nur erscheint wenn man ein Button gedrückt hat, und der Rollover Effekt soll dann beim gedrückten Mainbutton aktiv bleiben bis man ein anderen Button anklickt.
Im Moment ist ja immer der Homebutton aktiv, aber das kann ja nicht so bleiben.

Muss ich nun wirklich für jeden Button eine Seite machen in der er aktiv is oder geht das mit nem einfachen code ?

Meike

Maik · 12. Juni 2008

Hi,

du hast doch im Stylesheet mit dem Selektor ul#main li#current a#[ID-Name] hierfür alle Vorbereitungen getroffen.

Nun musst du nur noch in den einzelnen Seiten die ID #current im entsprechenden Menüpunkt setzen.

mfg Maik

Fuu · 12. Juni 2008

Ähm Hä?

kannst du mir das bitte nochmal ein klein wenig ausführlicher erklären ?

✔ Technische Umsetzung einer Navigation mit Submenü

Maik

Fuu

Mitglied

Fuu

Mitglied

Maik

Fuu

Mitglied

Maik

Fuu

Mitglied

Fuu

Mitglied

Maik

Fuu

Mitglied

Neue Beiträge