当前位置：首页 > 资讯 > 技术文档

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

时间：2022-01-11 21:32 编辑：来源：阅读：
扫一扫，手机访问

摘要：搜集了几个不错的下拉菜单效果

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

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

这一个也不错

THE ULTIMATE CSS ONLY DROPDOWN MENU 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
 
 
<meta content="MSHTML 6.00.6000.16441" name="GENERATOR"></meta> 
 
<div class="menu"> 
[list] 
  [*][url=http://www.jluvip.com/works/css/menu/index.html]DEMOS[/url] 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        [list] 
          <li>[url=http://www.jluvip.com/works/css/menu/zero_dollars.html]zero  
          dollars advertising page[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/embed.html]wrapping text  
          around images[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/form.html]styled form[/url]  
          [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/nodots.html]active  
          focus[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/hover_click.html]hover/click  
          with no borders[/url] 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                [list] 
                  <li>[url=http://www.jluvip.com/works/css/menu/form.html]styled  
                  form[/url] [/*] 
                  [*][url=http://www.jluvip.com/works/css/menu/nodots.html]removing  
                  active/focus borders[/url] [/*] 
                  [*][url=http://www.jluvip.com/works/css/menu/hover_click.html]hover/click[/url]  
                  [/*][/list]</td></tr></tbody></table></li> 
          [*][url=http://www.jluvip.com/works/css/menu/shadow_boxing.html]shadow  
          boxing[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/old_master.html]image map  
          for detailed information[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/bodies.html]fun with  
          background images[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/fade_scroll.html]fade  
          scrolling[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/em_images.html]em image  
          sizes compared[/url] [/*][/list]</td></tr></tbody></table></li> 
  [*][url=http://www.jluvip.com/works/css/boxes/index.html]BOXES 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        [list] 
          <li>[url=http://www.jluvip.com/works/css/dropmenu/spies.html]a coded  
          list of spies[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/vertical.html]vertical  
          menu[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/expand.html]enlarging  
          unordered list[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/enlarge.html]link  
          images[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/cross.html]non-rectangular[/url]  
          [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/jigsaw.html]jigsaw  
          links[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/dropmenu/circles.html]circular  
          links[/url] [/*][/list]</td></tr></tbody></table></a></li> 
  [*][url=http://www.jluvip.com/works/css/mozilla/index.html]MOZILLA[/url] 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        [list] 
          <li>[url=http://www.jluvip.com/works/css/mozilla/dropdown.html]drop down  
          menu[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/cascade.html]cascading  
          menu[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/content.html]content:[/url]  
          [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/moxbox.html]mozzie  
          box[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/rainbow.html]I can  
          build a rainbow with transparent borders[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/snooker.html]a snooker  
          cue using border art[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/target.html]target  
          practise[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/splittext.html]two tone  
          headings[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/mozilla/shadow_text.html]shadow  
          text[/url] [/*][/list]</td></tr></tbody></table></li> 
  [*][url=http://www.jluvip.com/works/css/ie/index.html]EXPLORER[/url] 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        [list] 
          <li>[url=http://www.jluvip.com/works/css/ie/exampleone.html]the first  
          example for Internet Explorer[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/ie/weft.html]weft fonts[/url]  
          [/*] 
          [*][url=http://www.jluvip.com/works/css/ie/exampletwo.html]vertically  
          aligning text[/url] [/*][/list]</td></tr></tbody></table></li> 
  [*][url=http://www.jluvip.com/works/css/opacity/index.html]OPACITY[/url] 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        [list] 
          <li>[url=http://www.jluvip.com/works/css/opacity/colours.html]a colour  
          wheel using opaque colours[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/opacity/picturemenu.html]a menu  
          using opacity[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/opacity/png.html]partial  
          opacity[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/opacity/png2.html]partial  
          opacity II[/url] [/*] 
          [*][url=http://www.jluvip.com/works/css/menu/hover_click.html]HOVER/CLICK[/url] 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                [list] 
                  <li>[url=http://www.jluvip.com/works/css/menu/form.html]styled  
                  form[/url] [/*] 
                  [*][url=http://www.jluvip.com/works/css/menu/nodots.html]removing  
                  active/focus borders[/url] [/*] 
                  [*][url=http://www.jluvip.com/works/css/menu/hover_click.html]hover/click[/url]  
                  [/*][/list]</td></tr></tbody></table></li>[/list]</td></tr></tbody></table></li>[/list]</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

http://www.jluvip.com/works/css/dropmenu/dropmenu.html

全部评论(0)

上一篇：超个性的导航效果
下一篇：jQuery设置div一直在页面顶部显示的方法

资讯排行榜
更多>>