Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Erstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation

高洛峰
Freigeben： 2017-03-08 14:28:29
Original
1552 Leute haben es durchsucht

Das Beispiel in diesem Artikel zeigt die reine CSS-Implementierung des mehrstufigen horizontalen Dropdown-Navigationsmenücodes als Referenz. Der spezifische Inhalt ist wie folgt

Werfen wir einen Blick auf die Darstellungen Erstens:

Erstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation

Implementierungscode:

CSS-Code: 

<style type="text/css">   
/* for this demo only */  
#backgroundHolder { width:750px; height:500px; padding-top:10px; margin:0 auto; }   
/* ---------------------------------------------------------------------------- */  
/* default styling */  
.nav, .nav ul { list-style-type:none; margin:0; padding:0; }   
.nav a { text-decoration:none; }   
.nav { font-family: arial, sans-serif; font-size:12px; width:650px; margin:0 auto; }   
/* style the links */  
.nav a { background:url(ulmulti3/box.gif) no-repeat rightright center; }   
.nav a.top { background:url(ulmulti3/box.gif) no-repeat rightright top; }   
.nav a.top2 { background:url(ulmulti3/box2.gif) no-repeat rightright top; }   
.nav a.bottombottom { background:url(ulmulti3/box.gif) no-repeat rightright bottombottom; }   
.rightright ul ul a { background:url(ulmulti3/box3.gif) no-repeat rightright center; }   
.rightright ul ul a.top2 { background:url(ulmulti3/box3.gif) no-repeat rightright top; }   
.rightright ul ul a.bottombottom { background:url(ulmulti3/box3.gif) no-repeat rightright bottombottom; }   
/* style the <b> element so that is does not affect the size of the link */  
.nav a b { color:#fff; font-weight:normal; display:block; padding:5px 10px 5px 15px; }   
.nav .fly .main b { background: transparent url(ulmulti3/arrow.gif) no-repeat 117px 9px; }   
.nav .down b { background: transparent url(ulmulti3/arrow2.gif) no-repeat 115px 11px; }   
.nav .rightright ul b { text-align:rightright; }   
.nav .rightright ul ul b { padding: 5px 15px 5px 10px; }   
.nav .rightright ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 15px 9px; text-align:rightright; }   
.nav .rightright ul ul .main b { background: transparent url(ulmulti3/arrow3.gif) no-repeat 5px 9px; text-align:rightright; }   
/* HEIGHT */  
.nav ul ul { top:-24px; } /* position the top of the flyout first sub menus */  
.nav ul ul ul { top:-25px; } /* position the top of the flyout second and third sub menus */  
.nav ul.two { top:-40px; } /* position the top of the flyout sub menus with previous text on two lines */  
/* WIDTH change this WITH CARE to suit your requirements */  
    
/*set the link width here*/  
.nav .drop, .nav a { width:130px; }   
.nav ul li { max-width:130px; } /* fix for IE8 */  
/* set the left flyout position here */  
.nav ul ul { left:130px; }   
/* set the right flyout position here */  
.nav li.rightright ul ul { left:auto; rightright:120px; }   
.nav li.rightright ul ul ul { left:auto; rightright:130px; }   
/* make this WIDTH - 1px */ /* or WIDTH - 0.063em if using em sizing */  
.nav a { margin-right:-129px; }   
/* ---------------------------------------------------------------------------- */  
    
/* DO NOT CHANGE ANYTHING BELOW */  
.nav li { float:left; } /* fixes IE bugs, and allows for clearing */  
.nav ul { float:left; position:relative; z-index:20; } /* necessary for float drop and to stack the <ul>s */  
.nav ul li { clear:left; } /* must clear the floated list item inside sublist */  
.nav a { position:relative; display:block; } /* needs to have a position, to be above the rest */  
.nav a.main { float:left; /* necessary for float drop */ margin-top:10000px; } /* bring the top level links back into view */  
.nav .drop, .nav .fly { margin-top:-10000px; } /* hide the sub links and their containers, opera has low upper limits */  
.nav ul { margin-bottom:-5000px; } /* avoid any interaction between the subs, can be any large size */  
/* The bit that does ALL the work to bring the sub menus into view */  
    
.nav a:hover, .nav a:focus, .nav a:active { margin-right:0; z-index:10; outline:0; }   
.nav a:hover b, .nav a:focus b, .nav a:active b { color:#000; cursor:pointer; } /* this is for keyboard tabbing color change */  
/* OPERA fix */  
.nav ul:hover, .nav ul ul:hover { clear:left; } /* to stop intermittent sub link :hover problems */  
    
/* ---------------------------------------------------------------------------- */  
</style>   
<!--[if lte IE 7]>   
<style type="text/css">   
/* bug fixes for IE7 and lower - DO NOT CHANGE */  
.nav .fly {width:99%;} /* make each flyout 99% of the prevous level */  
a:active {} /* requires a blank style for :active to stop it being buggy */  
</style>
Nach dem Login kopieren


HTML-Code: 

  1. <body>  
<p id="backgroundHolder">  
  <ul class="nav">  
    <li class="drop"><a class="main top" href="#url"><b>Home</b></a></li>  
    <li class="drop"><a class="main down top" href="#url"><b>Equipment</b></a>  
      <ul>  
        <li class="fly"><a class="main" href="#url"><b>Cameras</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>Film Type</b></a></li>  
            <li><a href="#url"><b>Compact</b></a></li>  
            <li><a href="#url"><b>Polaroid</b></a></li>  
            <li><a href="#url"><b>Digital</b></a></li>  
            <li class="fly"><a class="main" href="#url"><b>Digital SLR</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Canon</b></a></li>  
                <li><a href="#url"><b>Nikon</b></a></li>  
                <li><a href="#url"><b>Panasonic</b></a></li>  
                <li><a class="bottom" href="#url"><b>Kodak</b></a></li>  
              </ul>  
            </li>  
            <li><a class="bottom" href="#url"><b>Second Hand</b></a></li>  
          </ul>  
        </li>  
        <li class="fly"><a class="main" href="#url"><b>Video Cameras & Accessories</b></a>  
          <ul class="two">  
            <li class="fly"><a class="main top2" href="#url"><b>Latest Models</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Nikon</b></a></li>  
                <li><a href="#url"><b>Panasonic</b></a></li>  
                <li><a href="#url"><b>Canon</b></a></li>  
                <li><a href="#url"><b>Pentax</b></a></li>  
                <li><a class="bottom" href="#url"><b>Minolta</b></a></li>  
              </ul>  
            </li>  
            <li><a href="#url"><b>Special Offers</b></a></li>  
            <li><a class="bottom" href="#url"><b>Professional</b></a></li>  
          </ul>  
        </li>  
        <li class="fly"><a class="main" href="#url"><b>Lenses</b></a>  
          <ul>  
            <li class="fly"><a class="main top2" href="#url"><b>Digital</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Standard</b></a></li>  
                <li><a href="#url"><b>Telephoto</b></a></li>  
                <li><a href="#url"><b>Wide Angle</b></a></li>  
                <li class="fly"><a class="main" href="#url"><b>Zoom</b></a>  
                  <ul>  
                    <li><a class="top2" href="#url"><b>Nikon</b></a></li>  
                    <li><a href="#url"><b>Pentax</b></a></li>  
                    <li><a href="#url"><b>Minolta</b></a></li>  
                    <li><a class="bottom" href="#url"><b>Panasonic</b></a></li>  
                  </ul>  
                </li>  
                <li class="fly"><a class="main" href="#url"><b>Zoom with Macro</b></a>  
                  <ul>  
                    <li><a class="top2" href="#url"><b>Panasonic</b></a></li>  
                    <li><a href="#url"><b>Minolta</b></a></li>  
                    <li><a href="#url"><b>Pentax</b></a></li>  
                    <li><a href="#url"><b>Canon</b></a></li>  
                    <li><a class="bottom" href="#url"><b>Nikon</b></a></li>  
                  </ul>  
                </li>  
                <li><a href="#url"><b>Fisheye</b></a></li>  
                <li><a class="bottom" href="#url"><b>x2 converters</b></a></li>  
              </ul>  
            </li>  
            <li class="fly"><a class="main" href="#url"><b>Standard SLR</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Canon</b></a></li>  
                <li><a href="#url"><b>Nikon</b></a></li>  
                <li><a href="#url"><b>Panasonic</b></a></li>  
                <li><a href="#url"><b>Pentax</b></a></li>  
                <li><a class="bottom" href="#url"><b>Minolta</b></a></li>  
              </ul>  
            </li>  
            <li><a href="#url"><b>Cases</b></a></li>  
            <li class="fly"><a class="main" href="#url"><b>Large Format</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Hasselblad</b></a></li>  
                <li><a href="#url"><b>Arca-Swiss</b></a></li>  
                <li><a class="bottom" href="#url"><b>Leica</b></a></li>  
              </ul>  
            </li>  
            <li><a href="#url"><b>Lens Hoods</b></a></li>  
            <li><a class="bottom" href="#url"><b>Lens Cleaners</b></a></li>  
          </ul>  
        </li>  
        <li><a href="#url"><b>Tripods</b></a></li>  
        <li><a href="#url"><b>Flashguns</b></a></li>  
        <li><a href="#url"><b>Accessories, filters & lens covers</b></a></li>  
        <li><a href="#url"><b>Special Offers</b></a></li>  
        <li><a class="bottom" href="#url"><b>Electronics</b></a></li>  
      </ul>  
    </li>  
    <li class="drop"><a class="main down top" href="#url"><b>Accessories</b></a>  
      <ul>  
        <li class="fly"><a class="main" href="#url"><b>Flashguns</b></a>  
          <ul>  
            <li class="fly"><a class="main top2" href="#url"><b>Digital Cameras</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Nikon</b></a></li>  
                <li><a href="#url"><b>Canon</b></a></li>  
                <li><a href="#url"><b>Panasonic</b></a></li>  
                <li><a href="#url"><b>Pentax</b></a></li>  
                <li><a class="bottom" href="#url"><b>Kodak</b></a></li>  
              </ul>  
            </li>  
            <li><a href="#url"><b>Film Cameras</b></a></li>  
            <li><a href="#url"><b>Reflectors</b></a></li>  
            <li><a href="#url"><b>Stands</b></a></li>  
            <li><a href="#url"><b>Remote Control</b></a></li>  
            <li><a class="bottom" href="#url"><b>Batteries</b></a></li>  
          </ul>  
        </li>  
        <li class="fly"><a class="main" href="#url"><b>Filters</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>Ultra Violet</b></a></li>  
            <li><a href="#url"><b>Lens protection</b></a></li>  
            <li><a href="#url"><b>Yellow</b></a></li>  
            <li><a href="#url"><b>Red</b></a></li>  
            <li><a href="#url"><b>Orange</b></a></li>  
            <li><a class="bottom" href="#url"><b>Blue</b></a></li>  
          </ul>  
        </li>  
        <li class="fly"><a class="main" href="#url"><b>Remote Control</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>Canon</b></a></li>  
            <li><a href="#url"><b>Nikon</b></a></li>  
            <li><a class="bottom" href="#url"><b>Pentax</b></a></li>  
          </ul>  
        </li>  
        <li class="fly"><a class="main" href="#url"><b>Camera Cases</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>Pentax</b></a></li>  
            <li><a href="#url"><b>Nikox</b></a></li>  
            <li><a href="#url"><b>Canon</b></a></li>  
            <li><a href="#url"><b>Pentax</b></a></li>  
            <li><a href="#url"><b>Kodak</b></a></li>  
            <li><a class="bottom" href="#url"><b>Minolta</b></a></li>  
          </ul>  
        </li>  
        <li><a class="bottom" href="#url"><b>Lens Brush</b></a></li>  
      </ul>  
    </li>  
    <li class="drop right"><a class="main down top" href="#url"><b>Outlets</b></a>  
      <ul>  
        <li><a href="#url"><b>Support</b></a></li>  
        <li><a href="#url"><b>Buying</b></a></li>  
        <li><a href="#url"><b>Photographers</b></a></li>  
        <li class="fly"><a class="main" href="#url"><b>Stockist</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>Currys</b></a></li>  
            <li><a href="#url"><b>Dixons</b></a></li>  
            <li><a href="#url"><b>Jessops</b></a></li>  
            <li><a class="bottom" href="#url"><b>Staples</b></a></li>  
          </ul>  
        </li>  
        <li><a href="#5"><b>General</b></a></li>  
        <li class="fly"><a class="main bottom" href="#url"><b>Sales</b></a>  
          <ul>  
            <li><a class="top2" href="#url"><b>USA</b></a></li>  
            <li><a href="#url"><b>CANADA</b></a></li>  
            <li><a href="#url"><b>South America</b></a></li>  
            <li class="fly"><a class="main" href="#url"><b>Europe</b></a>  
              <ul>  
                <li><a class="top2" href="#url"><b>Britain</b></a></li>  
                <li><a href="#url"><b>France</b></a></li>  
                <li><a href="#url"><b>Germany</b></a></li>  
                <li><a href="#url"><b>Spain</b></a></li>  
                <li><a class="bottom" href="#url"><b>Italy</b></a></li>  
              </ul>  
            </li>  
            <li><a href="#url"><b>Australia</b></a></li>  
            <li><a class="bottom" href="#url"><b>Asia</b></a></li>  
          </ul>  
        </li>  
      </ul>  
    </li>  
    <li class="drop"><a class="main top" href="#url"><b>Privacy Policy</b></a></li>  
  </ul>  
</p>  
<br>  
<br>  
<p align="center"> </p>  
  
</body>
    Nach dem Login kopieren

    Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt .

    Das obige ist der detaillierte Inhalt vonErstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
css 导航菜单
Quelle：php.cn
Vorheriger Artikel：So verwenden Sie die Box-Sizing-Eigenschaft von CSS3, um das Problem der Div-Breite und -Höhe zu lösen, die durch Auffüllen gestreckt wird Nächster Artikel：Eine Einführung in Pseudoelemente in CSS und ihre Unterschiede zu Pseudoklassen
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...
Aus 2024-04-06 19:23:03
0
1
411
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Unterer CSS-Rand in der Navigationsleiste Ich habe eine Navigationsleiste und habe unten eine rote Linie hinzugefügt, wenn der Mausz...
Aus 2024-04-06 15:04:41
0
2
347
Mittleres Dropdown-Menü in der Navigationsleiste Kann für CSS/HTML verwendet werden..navbar{width:100%;background-color:rgb(151,44,44);over...
Aus 2024-04-04 18:24:52
0
1
338
JavaScript wird nicht wie erwartet ausgeführt Ich versuche, HTMLCSSJS reaktionsfähig zu machen, aber es funktioniert nicht wie erwartet....
Aus 2024-04-04 13:05:32
0
1
306
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage