Div+Css(+Js)菜单代码及制作工具

web前端|css教程

web前端-css教程

效果直逼flash的Div+Css+Js菜单

php 开源的cms系统源码下载,310uh ubuntu,python爬虫全书网,php 模型连接三个数据表,seo方案投放lzw

<br /><title>css菜单</title> <div class="khw">asp.net小系统源码下载,rst关闭安装ubuntu,打新包时需要重启tomcat吗,亚马逊爬虫点广告,php变量名可以是中文吗,然后才能SEOlzw</div> body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:relative; } #fbtn_txt div{ height:30px; padding-top:11px; font-size:12px; color:#800080; text-align:center; cursor:hand; } #fbtn_mask{ background-color:#ffffff; position:relative; width:100%; height:100%; } <p> <div class="khw">图片采集站源码,ubuntu搜索文件失败,tomcat6运行闪退,爬虫账号权限,php图片上传到mysql路径,香河seo定制lzw</div> </p><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>G1</div><div>good morning</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>G2</div><div>good evening</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>M1</div><div>my name is fireyy</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>M2</div><div>mm mm i love u</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>G1</div><div>good morning</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>G2</div><div>good evening</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>M1</div><div>my name is fireyy</div></div></div><div id="fbtn"><div id="fbtn_mask"></div><div id="fbtn_txt"><div>M2</div><div>mm mm i love u</div></div></pre> var current=null; var t=null; </p><p>for(var i=0;i<fbtn.length;i++){ fbtn_txt[i].style.posTop=-30; fbtn_mask[i].style.posTop=-30; fbtn[i].index=i; fbtn[i].style.display="block"; fbtn[i].onmouseover=function(){ if(!current){ current=this; domove(this.index); } else  if(current!=this){ domove(current.index); domove(this.index); current=this; } } fbtn[i].onmouseout=function(){ if(event.toElement==this.parentElement&t==this){ domove(this.index); current=null; } } } function domove(num){ var o=fbtn_txt[num]; var m=fbtn_mask[num]; if(o.style.posTop30) m.style.posTop=-30; else m.style.posTop=0; } else{ m.style.posTop+=3; o.style.posTop-=3; setTimeout(‘domove(‘+num+’)’,15); } } <br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]另转：5款纯div+css制作的弹出菜单(标准且无js)
A、最基本的：二级dropdown弹出菜单

<br /><title>二级dropdown弹出菜单–A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title> </p> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ </p><p>.menu { font-family: arial, sans-serif;  width:750px;  margin:0;  margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0;  margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left;  position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block;  text-align:center;  text-decoration:none;  width:104px;  height:30px;  color:#000;  border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7;  line-height:30px;  font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } </p><p>/* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff;  background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block;  position:absolute;  top:31px;  left:0;  width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block;  background:#faeec7;  color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184;  color:#000; } </p><p>  /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0;  padding:0; } /* ignore the link used by ‘other browsers’ */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff;  background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block;  position:absolute;  top:32px;  left:0;  width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7;  color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184;  color:#000; }  <br /> </p><p> </p><div class="menu"><p>DEMOS </p><p> DEMOS <table><tr><td>  </p><p>    zero dollars<br />    wrapping text<br />    styled form<br />    active focus<br />    shadow boxing<br />    image map<br />    fun backgrounds<br />    fade scrolling<br />    em sized images </p><p> </td></tr></table>   </p><p>MENUS </p><p> MENUS <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>LAYOUTS </p><p> LAYOUTS <table><tr><td>  </p><p>    Fixed 1<br />    Fixed 2<br />    Fixed 3<br />    Fixed 4<br />    minimum width </p><p> </td></tr></table>   </p><p>BOXES </p><p> BOXES <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>MOZILLA </p><p> MOZILLA <table><tr><td>  </p><p>    drop down menu<br />    cascading menu<br />    content:<br />    mozzie box<br />    rainbow box<br />    snooker cue<br />    target practise<br />    two tone headings<br />    shadow text </p><p> </td></tr></table>   </p><p>EXPLORER </p><p> EXPLORER <table><tr><td>  </p><p>    example one<br />    weft fonts<br />    vertical align </p><p> </td></tr></table>   </p><p>OPACITY </p><p> OPACITY <table><tr><td>  </p><p>    opaque colours<br />    opaque menu<br />    partial opacity<br />    partial opacity II </p><p> </td></tr></table>   </p><p> </p><div class="clear"> </div></pre><br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]B、三级dropdown弹出菜单

<br /><title>三级dropdown弹出菜单</title> </p> /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} </p><p>/* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} </p><p>  .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;}  <br /> </p><p> </p><div class="menu"><p>DEMOS </p><p> DEMOS <table><tr><td>  </p><p>    zero dollars<br />    wrapping text<br />    styled form<br />    active focus </p><p>    HOVER/CLICK > </p><p>     HOVER/CLICK >   <table><tr><td>    </p><p>            styled form<br />            active focus<br />            hover/click </p><p>         </td></tr></table>       </p><p>    shadow boxing<br />    image map<br />    fun backgrounds<br />    fade scrolling<br />    em sized images </p><p> </td></tr></table>   </p><p>MENUS </p><p> MENUS <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>LAYOUTS </p><p> LAYOUTS <table><tr><td>  </p><p>    Fixed 1<br />    Fixed 2<br />    Fixed 3<br />    Fixed 4<br />    minimum width </p><p> </td></tr></table>   </p><p>BOXES </p><p> BOXES <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>MOZILLA </p><p> MOZILLA <table><tr><td>  </p><p>    drop down menu<br />    cascading menu<br />    content:<br />    mozzie box<br />    rainbow box<br />    snooker cue<br />    target practise<br />    two tone headings<br />    shadow text </p><p> </td></tr></table>   </p><p>EXPLORER </p><p> EXPLORER <table><tr><td>  </p><p>    example one<br />    weft fonts<br />    vertical align </p><p> </td></tr></table>   </p><p>OPACITY </p><p> OPACITY <table><tr><td>  </p><p>    opaque colours<br />    opaque menu<br />    partial opacity<br />    partial opacity II<br />    < HOVER/CLICK   <br />  < HOVER/CLICK   <table><tr><td>   </p><p>            styled form<br />            active focus<br />            hover/click </p><p>         </td></tr></table>       </p><p> </td></tr></table>   </p></pre><br /> </p><p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]C、flyout-竖向三级弹出菜单

<br /><title>flyout-竖向三级弹出菜单</title> </p> /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} </p><p>/* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} </p><p>  .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}  <br /> </p><p> </p><div class="menu"><p> DEMOS </p><p>   DEMOS  <table><tr><td>   </p><p>  zero dollars<br />  wrapping text<br />  styled form<br />  active focus<br />  HOVER/CLICK > </p><p>     HOVER/CLICK >   <table><tr><td>    </p><p>   styled form<br />   active focus<br />   hover/click </p><p>     </td></tr></table>       </p><p>  shadow boxing<br />  image map<br />  fun backgrounds<br />  fade scrolling<br />  em sized images </p><p>     </td></tr></table>       </p><p> MENUS </p><p>   MENUS  <table><tr><td>   </p><p>  spies menu<br />  vertical menu<br />  enlarging list<br />  link images<br />  non-rectangular<br />  jigsaw links<br />  circular links </p><p>   </td></tr></table>     </p><p> LAYOUTS </p><p>   LAYOUTS  <table><tr><td>   </p><p>  Fixed 1<br />  Fixed 2<br />  Fixed 3<br />  Fixed 4<br />  minimum width </p><p>   </td></tr></table>     </p><p> BOXES </p><p>   BOXES  <table><tr><td>   </p><p>  spies menu<br />  vertical menu<br />  enlarging list<br />  link images<br />  non-rectangular<br />  jigsaw links<br />  circular links </p><p>   </td></tr></table>     </p><p> MOZILLA </p><p>   MOZILLA  <table><tr><td>   </p><p>  drop down menu<br />  cascading menu<br />  content:<br />  mozzie box<br />  rainbow box<br />  snooker cue<br />  target practise<br />  two tone headings<br />  shadow text </p><p>   </td></tr></table>     </p><p> EXPLORER </p><p>   EXPLORER  <table><tr><td>   </p><p>  example one<br />  weft fonts<br />  vertical align </p><p>   </td></tr></table>     </p><p> OPACITY </p><p>   OPACITY  <table><tr><td>   </p><p> opaque colours<br /> opaque menu<br /> partial opacity<br /> partial opacity II </p><p>   </td></tr></table>     </p></pre><br /> </p><p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]D、dropline-水平三级横向弹出菜单

<br /><title>dropline-水平三级横向弹出菜单</title> </p> /* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} .menu ul {padding:0; margin:0; list-style-type: none;} .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.jpg) bottom right no-repeat;} .menu ul li ul {display: none;} </p><p>/* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#b3ab79;} .menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} .menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} .menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.jpg) bottom right no-repeat; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li:hover ul.right li {float:right;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} </p><p>  table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.jpg) 20px right no-repeat;} .menu ul li a:hover {color:#fff; background:#b3ab79;} .menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;} .menu ul li a:hover ul.left_side li {float:left;} .menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.jpg) 20px right no-repeat; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}  <br /> </p><p> </p><div class="menu"><p>DEMOS </p><p> DEMOS <table><tr><td>  </p><p>    zero dollars<br />    wrapping text<br />    styled form<br />    active focus </p><p>    HOVER/CLICK </p><p>     HOVER/CLICK   <table><tr><td>    </p><p>            styled form<br />            active focus<br />            hover/click </p><p>         </td></tr></table>       </p><p>    shadow boxing<br />    image map </p><p> </td></tr></table>   </p><p>MENUS </p><p> MENUS <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>LAYOUTS </p><p> LAYOUTS <table><tr><td>  </p><p>    Fixed 1<br />    Fixed 2<br />    Fixed 3<br />    Fixed 4<br />    minimum width </p><p> </td></tr></table>   </p><p>BOXES </p><p> BOXES <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>MOZILLA </p><p> MOZILLA <table><tr><td>  </p><p>    drop down menu<br />    cascading menu<br />    content:<br />    mozzie box<br />    rainbow box<br />    snooker cue<br />    target practise </p><p> </td></tr></table>   </p><p>EXPLORER </p><p> EXPLORER <table><tr><td>  </p><p>    example one<br />    weft fonts<br />    vertical align </p><p> </td></tr></table>   </p><p>OPACITY </p><p> OPACITY <table><tr><td>  </p><p>    opaque colours<br />    opaque menu<br />    partial opacity<br />    partial opacity II<br />    HOVER/CLICK </p><p>     HOVER/CLICK   <table><tr><td>    </p><p>            styled form<br />            active focus<br />            hover/click </p><p>         </td></tr></table>       </p><p> </td></tr></table>   </p></pre><br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]E、upmenu-水平竖弹向上三级弹出菜单

<br /><title>upmenu-水平竖弹向上三级弹出菜单</title> </p> /* common styling */ .menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; position:relative;} .menu ul li ul {display: none;} </p><p>/* specific to non IE browsers */ .menu ul li:hover a {color:#000; background:#e9e9c7;} .menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} .menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} </p><p>.menu ul li:hover ul.left {left:-105px;} .menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} </p><p>  table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#000; background:#e9e9c7;} .menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;} .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} .menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li a:hover ul.left {left:-105px;} .menu ul li a:hover ul li a:hover ul.left {left:-210px;}  <br /> </p><p> </p><div class="menu"><p>DEMOS </p><p> DEMOS <table><tr><td>  </p><p>    zero dollars<br />    wrapping text<br />    styled form<br />    active focus </p><p>    HOVER/CLICK > </p><p>     HOVER/CLICK >   <table><tr><td>    </p><p>            styled form<br />            active focus<br />            hover/click </p><p>         </td></tr></table>       </p><p>    shadow boxing<br />    image map<br />    fun backgrounds </p><p>    fade scrolling<br />    em sized images </p><p> </td></tr></table>   </p><p>MENUS </p><p> MENUS <table><tr><td>  </p><p>    spies menu<br />    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular </p><p>    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>LAYOUTS </p><p> LAYOUTS <table><tr><td>  </p><p>    Fixed 1<br />    Fixed 2<br />    Fixed 3<br />    Fixed 4<br />    minimum width </p><p> </td></tr></table>   </p><p>BOXES </p><p> BOXES <table><tr><td>  </p><p>    spies menu </p><p>    vertical menu<br />    enlarging list<br />    link images<br />    non-rectangular<br />    jigsaw links<br />    circular links </p><p> </td></tr></table>   </p><p>MOZILLA </p><p> MOZILLA <table><tr><td>  </p><p>    drop down menu </p><p>    cascading menu<br />    content:<br />    mozzie box<br />    rainbow box<br />    snooker cue<br />    target practise </p><p>    two tone headings<br />    shadow text </p><p> </td></tr></table>   </p><p>EXPLORER </p><p> EXPLORER <table><tr><td>  </p><p>    example one<br />    weft fonts<br />    vertical align </p><p> </td></tr></table>   </p><p>OPACITY </p><p> OPACITY <table><tr><td>  </p><p>    < HOVER/CLICK   <br />  < HOVER/CLICK   <table><tr><td>   </p><p>            styled form<br />            active focus </p><p>            hover/click </p><p>         </td></tr></table>       </p><p>    opaque colours<br />    opaque menu<br />    partial opacity<br />    partial opacity II </p><p> </td></tr></table>   </p></pre><br />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]如果你很厌烦来研究、修改代码，那么这里有款软件制作基于DIV+CSS的各类菜单效果（能整合到DREAMWEAVER中将是件多么让人高兴的事）。

Div+Css(+Js)菜单代码及制作工具

软件下载： http://dl.filekicker.com/send/file/175939-ALVX/css_tab.zip

该软件介绍： http://www.highdots.com/css-tab-designer/

下载地址页面： http://www.highdots.com/download.html

暂无相关文章