jquery椭圆边框下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery椭圆边框下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery椭圆边框下拉菜单</title>
 <style>
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;}
        /* menu */
        #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #menu a { color:#fff; text-decoration:none; }
        #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #menu > li a:hover {color:#B0D730;}
        #menu .logo {background:; padding:0px; }
        /* sub-menus*/
        #menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
        #menu li:hover ul { display:block;}
        #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #menu li ul li:first-child { border-top: none; }
        #menu li ul li a { display:block; color:#0395CC; }
        #menu li ul li a:hover { color:#7FCDFE; }
        /* main submenu */
        #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
        #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #menu .corner_left { position:absolute; left:0px; top:0px;}
        #menu .corner_right { position:absolute; left:132px; top:0px;}
        #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
    </style>
</head>
<body>
<div align="center">
	<table border="1" width="565" style="border-width: 0px" height="214">
		<!-- MSTableType="layout" -->
		<tr>
			<td style="border-style: none; border-width: medium" align="center" height="210" width="559">&nbsp;
   <div style="margin-left:50px;">
        <ul id="menu">
            <li class="logo">
                <img style="float:left;" alt="" src="menu_left.png"/>
                <ul id="main">
                    <li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_blue_left.png"/>
                        <img class="middle" alt="" src="dot_blue.png"/>
                        <img class="corner_right" alt="" src="corner_blue_right.png"/>
                    </li>
                </ul>
                
            </li>
            <li><a href="#">Login</a>
            </li>
            <li><a href="#">Help</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <a href="#">General help</a>
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Posts</a></li>
                    <li><a href="#">Pages</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="magnifier.png" alt="Search" onclick="alert('You clicked on search button')" /></div>
                <ul id="search">
                    <li>
                        <img class="corner_inset_left" alt="" src="corner_inset_left.png"/>
                        <input id="cbxAll" type="checkbox" />All
                        <img class="corner_inset_right" alt="" src="corner_inset_right.png"/>
                    </li>
                    <li><input id="Articles" type="checkbox" />Articles</li>
                    <li><input id="Tutorials" type="checkbox" />Tutorials</li>
                    <li><input id="Reviews" type="checkbox" />Reviews</li>
                    <li><input id="Resources" type="checkbox" />Resources</li>
                    <li class="last">
                        <img class="corner_left" alt="" src="corner_left.png"/>
                        <img class="middle" alt="" src="dot.gif"/>
                        <img class="corner_right" alt="" src="corner_right.png"/>
                    </li>
                </ul>
            </li>
        </ul>
        <img style="float:left;" alt="" src="menu_right.png"/>
    </div>
</td>
		</tr>
	</table></div>
<div style="float:none; clear:both;"></div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)