ホームページ >ウェブフロントエンド >jsチュートリアル >搜集了几个不错的下拉菜单效果_导航菜单

搜集了几个不错的下拉菜单效果_导航菜单

WBOYオリジナル: 2016-05-16 19:13:141217ブラウズ

现在的下拉菜单是兼容性越来越好了，不用js的最好了，但如果能用最少的代码实现出效果，也是不错的
第一个，用到的js,不过很短，也很明了

这一个也不错

<title>THE ULTIMATE CSS ONLY DROPDOWN MENU</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
.menu { 
    FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative 
} 
.menu UL { 
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none 
} 
.menu UL LI { 
    FLOAT: left; POSITION: relative 
} 
.menu UL LI A { 
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none 
} 
.menu UL LI A:visited { 
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none 
} 
* HTML .menu UL LI A { 
    WIDTH: 139px 
} 
.menu UL LI A:visited { 
    WIDTH: 139px 
} 
.menu UL LI UL { 
    DISPLAY: none 
} 
TABLE { 
    FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse 
} 
.menu UL LI:hover A { 
    BACKGROUND: #bd8d5e; COLOR: #fff 
} 
.menu UL LI:hover UL { 
    MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em 
} 
.menu UL LI:hover UL LI UL { 
    DISPLAY: none 
} 
.menu UL LI:hover UL LI A { 
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto 
} 
.menu UL LI:hover UL LI A.drop { 
    BACKGROUND: url(drop.png) #c9c9a7 no-repeat right bottom 
} 
.menu UL LI:hover UL LI A:hover { 
    BACKGROUND: #c9c9a7; COLOR: #000 
} 
.menu UL LI:hover UL LI:hover UL { 
    DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px 
} 
.menu UL LI:hover UL LI:hover UL.left { 
    LEFT: -150px 
} 
</style> 
 
<meta content="MSHTML 6.00.6000.16441" name="GENERATOR"> 
 
<div class="menu"> 
<ul> 
  <li>
<a class="drop" href="http://www.jluvip.com/works/css/menu/index.html">DEMOS</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="The zero dollar ads page" href="http://www.jluvip.com/works/css/menu/zero_dollars.html">zero  
          dollars advertising page</a> </li> 
          <li>
<a title="Wrapping text around images" href="http://www.jluvip.com/works/css/menu/embed.html">wrapping text  
          around images</a> </li> 
          <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</a>  
          </li> 
          <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">active  
          focus</a> </li> 
          <li>
<a class="drop" title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click  
          with no borders</a> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul> 
                  <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled  
                  form</a> </li> 
                  <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing  
                  active/focus borders</a> </li> 
                  <li>
<a title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</a>  
                  </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
          <li class="upone">
<a title="Multi-position drop shadow" href="http://www.jluvip.com/works/css/menu/shadow_boxing.html">shadow  
          boxing</a> </li> 
          <li>
<a title="Image Map for detailed information" href="http://www.jluvip.com/works/css/menu/old_master.html">image map  
          for detailed information</a> </li> 
          <li>
<a title="fun with background images" href="http://www.jluvip.com/works/css/menu/bodies.html">fun with  
          background images</a> </li> 
          <li>
<a title="fade-out scrolling" href="http://www.jluvip.com/works/css/menu/fade_scroll.html">fade  
          scrolling</a> </li> 
          <li>
<a title="em size images compared" href="http://www.jluvip.com/works/css/menu/em_images.html">em image  
          sizes compared</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/boxes/index.html">BOXES </a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="a coded list of spies" href="http://www.jluvip.com/works/css/dropmenu/spies.html">a coded  
          list of spies</a> </li> 
          <li>
<a title="a horizontal vertical menu" href="http://www.jluvip.com/works/css/dropmenu/vertical.html">vertical  
          menu</a> </li> 
          <li>
<a title="an enlarging unordered list" href="http://www.jluvip.com/works/css/dropmenu/expand.html">enlarging  
          unordered list</a> </li> 
          <li>
<a title="an unordered list with link images" href="http://www.jluvip.com/works/css/dropmenu/enlarge.html">link  
          images</a> </li> 
          <li>
<a title="non-rectangular links" href="http://www.jluvip.com/works/css/dropmenu/cross.html">non-rectangular</a>  
          </li> 
          <li>
<a title="jigsaw links" href="http://www.jluvip.com/works/css/dropmenu/jigsaw.html">jigsaw  
          links</a> </li> 
          <li>
<a title="circular links" href="http://www.jluvip.com/works/css/dropmenu/circles.html">circular  
          links</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/mozilla/index.html">MOZILLA</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="A drop down menu" href="http://www.jluvip.com/works/css/mozilla/dropdown.html">drop down  
          menu</a> </li> 
          <li>
<a title="A cascading menu" href="http://www.jluvip.com/works/css/mozilla/cascade.html">cascading  
          menu</a> </li> 
          <li>
<a title="Using content:" href="http://www.jluvip.com/works/css/mozilla/content.html">content:</a>  
          </li> 
          <li>
<a title=":hover applied to a div" href="http://www.jluvip.com/works/css/mozilla/moxbox.html">mozzie  
          box</a> </li> 
          <li>
<a title="I can build a rainbow" href="http://www.jluvip.com/works/css/mozilla/rainbow.html">I can  
          build a rainbow with transparent borders</a> </li> 
          <li>
<a title="Snooker cue" href="http://www.jluvip.com/works/css/mozilla/snooker.html">a snooker  
          cue using border art</a> </li> 
          <li>
<a title="Target Practise" href="http://www.jluvip.com/works/css/mozilla/target.html">target  
          practise</a> </li> 
          <li>
<a title="Two tone headings" href="http://www.jluvip.com/works/css/mozilla/splittext.html">two tone  
          headings</a> </li> 
          <li>
<a title="Shadow text" href="http://www.jluvip.com/works/css/mozilla/shadow_text.html">shadow  
          text</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/ie/index.html">EXPLORER</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="Example one" href="http://www.jluvip.com/works/css/ie/exampleone.html">the first  
          example for Internet Explorer</a> </li> 
          <li>
<a title="Weft fonts" href="http://www.jluvip.com/works/css/ie/weft.html">weft fonts</a>  
          </li> 
          <li>
<a title="Vertical align" href="http://www.jluvip.com/works/css/ie/exampletwo.html">vertically  
          aligning text</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/opacity/index.html">OPACITY</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="colour wheel" href="http://www.jluvip.com/works/css/opacity/colours.html">a colour  
          wheel using opaque colours</a> </li> 
          <li>
<a title="a menu using opacity" href="http://www.jluvip.com/works/css/opacity/picturemenu.html">a menu  
          using opacity</a> </li> 
          <li>
<a title="partial opacity" href="http://www.jluvip.com/works/css/opacity/png.html">partial  
          opacity</a> </li> 
          <li>
<a title="partial opacity II" href="http://www.jluvip.com/works/css/opacity/png2.html">partial  
          opacity II</a> </li> 
          <li>
<a class="drop" title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">HOVER/CLICK</a> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul class="left"> 
                  <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled  
                  form</a> </li> 
                  <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing  
                  active/focus borders</a> </li> 
                  <li>
<a title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</a>  
                  </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li>
</ul>
</td>
</tr>
</tbody>
</table>

</li>
</ul>
</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签_典型特效次の記事：分别用两个函数实现的菜单_javascript技巧

続きを見る

搜集了几个不错的下拉菜单效果_导航菜单

関連記事