Heim > Artikel > Web-Frontend > Erstellen Sie den schönsten mehrstufigen CSS-Dropdown-Menücode für die horizontale Navigation

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

高洛峰Original: 2017-03-08 14:28:291549Durchsuche

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:

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>

HTML-Code:

<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>

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!

Stellungnahme：

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

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 wirdNächster 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

In Verbindung stehende Artikel

Mehr sehen