kostenloser Webspace werbefrei: lima-city

Drop down menu

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   gravedesign

   gravedesign hat kostenlosen Webspace.

   20:18, 13.10.2010

   Hi ,
   
   also ich versteh nich wie das funktionieren soll hab heut schon mehrfach versucht an bsp das zu verstehen aber es funktioniert einfach nicht bzw versteh ich auch nich wie das mit css umsetzbar sein soll.
   vlt kann mir das jemand erklären? verweißt mich bitte nicht auf andere seiten wo es code bsp oder sowas gibt ich hab heut schon einige seiten durch und ich habs nich hinbekommen
   
   hier der code
   
   CSS:
   

   /* menu */
   
   div#menu
       { width:900px; 
         margin-top: 2%; 
         height:50px; 
   }
   
   .navi {
       width: 100%;
       height: 50px;
   }
   
   .navi li{
       float: left;
       list-style: none;
       width:100px;
       height: 25px;
       background: url(../images/menu/carbonbutton2.png);
       text-align: center;
   }
   
   .navi li:hover {
       background: url(../images/menu/carbonbutton2.1.png); 
   }

   
   
   

   <div id="menu">
           <ul class="navi">
   		  <li><a href="#" title="Einstellungen">Einstellungen</a> <-hover dann öffnet sich die folgenden zeilen
   			<ul>
   				<li><a href="?seite=einstellungen" title="Einstellungen">Einstellungen</a></li>
   				<li><a href="?seite=profil" title="Profil">Profil</a></li>
   				<li><a href="?seite=nachrichten" title="Nachrichten">Nachrichten</a></li>
   				<li><a href="?seite=" title="Logins">Logins</a></li>
   				<li><a href="?seite=" title="Umfragen">Umfragen</a></li>
               </ul>

   
   
   ich wäre sehr froh wenn mir jemand es erklärt das umsetzen des drop down menü und das menübild soll sich auch bei hover ändern so wie schon im "normalen " teil des menü
   
   visited und active sollte vernachlässigt werden nur hover zwecks hintergundbild änderung sollte mit drin sein
   
   
   mfg grave
   
   
   Beitrag zuletzt geändert: 13.10.2010 20:45:59 von gravedesign

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   20:56, 13.10.2010

   css
   

   <style>
       /* menu */
   
   div#menu
       { width:900px; 
         margin-top: 2%; 
         height:50px; 
   }
   
   .navi {
       width: 100%;
       height: 50px;
   }
   
   .navi li{
       float: left;
       list-style: none;
       width:100px;
       height: 25px;
       background: url(../images/menu/carbonbutton2.png);
       text-align: center;
   }
   
   .navi li:hover ul{
       background: url(../images/menu/carbonbutton2.1.png); 
       display: inline;
   }
   .navi li ul {display: none;}

   
   
   html
   

   <div id="menu">
           <ul class="navi">
             <li><a href="#" title="Einstellungen">Einstellungen</a> 
               <ul>
                   <li><a href="?seite=einstellungen" title="Einstellungen">Einstellungen</a></li>
                   <li><a href="?seite=profil" title="Profil">Profil</a></li>
                   <li><a href="?seite=nachrichten" title="Nachrichten">Nachrichten</a></li>
                   <li><a href="?seite=" title="Logins">Logins</a></li>
                   <li><a href="?seite=" title="Umfragen">Umfragen</a></li>
               </ul>
           </li>
           </ul>

   
   
   Erst einmal habe ich die tags li & ul geschlossen .
   Dann .navi li ul {display: none;} ergänzt.
   
   Display:none = verstecken
   display: inline = zeigen (inline)
   
   .navi li:hover ul{
   
   = beider klasse "navie" im <li> da drunter, wenn dort die maus (hover) drüber geht, dann
   ändere die werte im <ul> da drunter
   
   
   .navi li ul {display: none;}
   = bei der klasse "navi" im unterknoten <li> und dessen unterknoten <ul> soll der standart wert display:none sein
   
   Übrigens (und das ist bekannt) wird das besonders von älteren ie-browsern nicht erkannt.
   Der effekt ist das diejenigen garnix sehen.
   
   
4. Autor dieses Themas

   gravedesign

   gravedesign hat kostenlosen Webspace.

   21:13, 13.10.2010

   hmn also das bild was beim hover effect erscheinen soll kommt nicht auch nicht bei den anderen menüpunkten
   
   vorher gings^^

5. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   21:18, 13.10.2010

   gravedesign schrieb:
   hmn also das bild was beim hover effect erscheinen soll kommt nicht auch nicht bei den anderen menüpunkten
   
   vorher gings^^
   

   
   
   Tja dann solltest du die edatei auch im richtigen ordner ablegen .
   Wenn ich eigene Bilder dort einfüge sind sie sichtbar.
   Bisschen eigenitiative hilft manchmal
6. Autor dieses Themas

   gravedesign

   gravedesign hat kostenlosen Webspace.

   21:22, 13.10.2010

   ist eigentlich im richtigen ordner etc
   
   sonst würe das bild (../images/menu/carbonbutton2.png) nich gehen und das geht und liegt im selben ordner ich probier mal mal schauen ob ichs hinbekomme jedenfalls geht das menu schonmal auf und zu und dadran hatte ich heut schon mich versucht... geht doch leichter ich danke dir vielmals^^
   
   hab es hinbekommen prima^^
   
   Beitrag zuletzt geändert: 13.10.2010 21:29:03 von gravedesign

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?