快捷導(dǎo)航

搜集了幾個(gè)不錯(cuò)的下拉菜單效果

更新時(shí)間：2007年05月21日 00:00:00 作者：

現(xiàn)在的下拉菜單是兼容性越來越好了，不用js的最好了，但如果能用最少的代碼實(shí)現(xiàn)出效果，也是不錯(cuò)的
第一個(gè)，用到的js,不過很短，也很明了

這一個(gè)也不錯(cuò)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><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></HEAD> <BODY> <div   id="wppm3vysvbp"   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"            >styled form</A>            </LI>           <LI><A title="Removing active/focus borders"            >active            focus</A> </LI>           <LI><A class=drop title="Hover/click with no active/focus borders"            >hover/click            with no borders</A>           <TABLE>             <TBODY>             <TR>               <TD>                 <UL>                   <LI><A title="Styling forms"                    >styled                    form</A> </LI>                   <LI><A title="Removing active/focus borders"                    >removing                    active/focus borders</A> </LI>                   <LI><A title="Hover/click with no active/focus borders"                    >hover/click</A>                    </LI></UL></TD></TR></TBODY></TABLE></LI>           <li id="wppm3vysvbp"    class=upone><A title="Multi-position drop shadow"            >shadow            boxing</A> </LI>           <LI><A title="Image Map for detailed information"            >image map            for detailed information</A> </LI>           <LI><A title="fun with background images"            >fun with            background images</A> </LI>           <LI><A title="fade-out scrolling"            >fade            scrolling</A> </LI>           <LI><A title="em size images compared"            >em image            sizes compared</A> </LI></UL></TD></TR></TBODY></TABLE></LI>   <LI><A >BOXES   <TABLE>     <TBODY>     <TR>       <TD>         <UL>           <LI><A title="a coded list of spies"            >a coded            list of spies</A> </LI>           <LI><A title="a horizontal vertical menu"            >vertical            menu</A> </LI>           <LI><A title="an enlarging unordered list"            >enlarging            unordered list</A> </LI>           <LI><A title="an unordered list with link images"            >link            images</A> </LI>           <LI><A title="non-rectangular links"            >non-rectangular</A>            </LI>           <LI><A title="jigsaw links"            >jigsaw            links</A> </LI>           <LI><A title="circular links"            >circular            links</A> </LI></UL></TD></TR></TBODY></TABLE></LI>   <LI><A >MOZILLA</A>   <TABLE>     <TBODY>     <TR>       <TD>         <UL>           <LI><A title="A drop down menu"            >drop down            menu</A> </LI>           <LI><A title="A cascading menu"            >cascading            menu</A> </LI>           <LI><A title="Using content:"            >content:</A>            </LI>           <LI><A title=":hover applied to a div"            >mozzie            box</A> </LI>           <LI><A title="I can build a rainbow"            >I can            build a rainbow with transparent borders</A> </LI>           <LI><A title="Snooker cue"            >a snooker            cue using border art</A> </LI>           <LI><A title="Target Practise"            >target            practise</A> </LI>           <LI><A title="Two tone headings"            >two tone            headings</A> </LI>           <LI><A title="Shadow text"            >shadow            text</A> </LI></UL></TD></TR></TBODY></TABLE></LI>   <LI><A >EXPLORER</A>   <TABLE>     <TBODY>     <TR>       <TD>         <UL>           <LI><A title="Example one"            >the first            example for Internet Explorer</A> </LI>           <LI><A title="Weft fonts"            >weft fonts</A>            </LI>           <LI><A title="Vertical align"            >vertically            aligning text</A> </LI></UL></TD></TR></TBODY></TABLE></LI>   <LI><A >OPACITY</A>   <TABLE>     <TBODY>     <TR>       <TD>         <UL>           <LI><A title="colour wheel"            >a colour            wheel using opaque colours</A> </LI>           <LI><A title="a menu using opacity"            >a menu            using opacity</A> </LI>           <LI><A title="partial opacity"            >partial            opacity</A> </LI>           <LI><A title="partial opacity II"            >partial            opacity II</A> </LI>           <LI><A class=drop title="Hover/click with no active/focus borders"            >HOVER/CLICK</A>           <TABLE>             <TBODY>             <TR>               <TD>                 <UL class=left>                   <LI><A title="Styling forms"                    >styled                    form</A> </LI>                   <LI><A title="Removing active/focus borders"                    >removing                    active/focus borders</A> </LI>                   <LI><A title="Hover/click with no active/focus borders"                    >hover/click</A>                    </LI></UL></TD></TR></TBODY></TABLE></LI></UL></TD></TR></TBODY></TABLE></LI></UL></DIV></BODY></HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

搜集了幾個(gè)不錯(cuò)的下拉菜單效果

相關(guān)文章

CSS 偽類實(shí)現(xiàn)的鼠標(biāo)滑動(dòng)圖片鏈接
CSS偽類實(shí)現(xiàn)的鼠標(biāo)滑動(dòng)鏈接，是一個(gè)圖片導(dǎo)航，在早期的DW中有專一制作本效果的插件，不過隨著大家CSS水平的提高，現(xiàn)在做出這種效果好像得心應(yīng)手了，因?yàn)檫@種果大家應(yīng)該都挺喜歡的。
2009-10-10
javascript實(shí)現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果！
javascript實(shí)現(xiàn)表現(xiàn)、結(jié)構(gòu)、行為分離的選項(xiàng)卡效果！...
2007-05-05
msn上的tab功能Firefox對(duì)childNodes處理的一個(gè)BUG
今天公司用到一個(gè)tab功能發(fā)現(xiàn) msn上的不錯(cuò)，但是在firefox兼容不好，msn他們的方法就是用了不少的div包含，不過網(wǎng)上有高人解決了。
2008-01-01
自己做一款不錯(cuò)的二級(jí)導(dǎo)航菜單
自己做一款不錯(cuò)的二級(jí)導(dǎo)航菜單，黑色風(fēng)格，是根據(jù)仿淘寶支付寶菜單而做的，自我感覺還算行吧。
2010-11-11
用javascript實(shí)現(xiàn)的不錯(cuò)的一款網(wǎng)頁選項(xiàng)卡
用javascript實(shí)現(xiàn)的不錯(cuò)的一款網(wǎng)頁選項(xiàng)卡...
2007-11-11
搜集了幾個(gè)不錯(cuò)的下拉菜單效果
搜集了幾個(gè)不錯(cuò)的下拉菜單效果...
2007-05-05
CSS鼠標(biāo)懸停菜單圖片交換技術(shù)實(shí)現(xiàn)
這是一個(gè)使用了圖片交換技術(shù)制作的CSS鼠標(biāo)懸停菜單，也就是大家所說的鼠標(biāo)經(jīng)過換色，不過本例中的菜單并沒有使用純CSS來實(shí)現(xiàn)背景換色，這里將用一幅圖片替換了背景色，因?yàn)橹饕窍胱尨蠹伊私釩SS對(duì)背景圖片控制的技巧
2009-11-11
純CSS實(shí)戰(zhàn)豎向?qū)Ш讲藛?，這也算是一個(gè)典型的CSS菜單啦，這里要用到兩個(gè)背景圖片，在鼠標(biāo)動(dòng)作時(shí)分別加載不同的背景圖片，以達(dá)到反差給人的清新效果，其實(shí)這種菜單的制作是很簡單的，代碼量不大，作為初級(jí)者的教程還是很不錯(cuò)的。
2010-03-03