html代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gmenu.js"></script>
</head>
<body>
<div class="top_nav_left">
<ul>
<li>
<a class="s">More<span class="arrow"></span></a>
<ul id="s">
<li><a href="#">Plugins and jQuery Examples</a></li>
<li><a href="#">Prototype Examples</a></li>
<li><a href="#">Mootools Examples</a></li>
<li><a href="#">Javascript Examples</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css代码:
body{
padding:0;
margin:0;
}
.top_nav_left{
font: 13px/27px Arial,sans-serif;
color:#FFFFFF;
height:30px;
background: black;
}
.top_nav_left a:hover{
background-color:#4C4C4C;
color:#FFFFFF;
}
.top_nav_left a{
text-decoration: none;
padding: 6px 8px 7px;
color:white;
outline:none;
cursor: pointer;
}
.top_nav_left ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.top_nav_left ul li{
padding:0;
float:left;
}
.top_nav_left ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:100%;
}
.top_nav_left ul li ul{
position: absolute;
border: 1px solid #C3D1EC;
box-shadow: 0 1px 5px #CCCCCC;
margin-top: -1px;
display:none;
padding: 0px 16px 0px 0;
}
.top_nav_left .active ul{
display:block !important;
}
.top_nav_left .active a{
background-color: white;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 29px;
padding: 0 8px 0 8px;
position:relative;
z-index: 1;
color:#3366CC;
}
.top_nav_left .active a:hover{
background-color:white;
}
.top_nav_left .active ul a:hover{
background-color:#e4ebf8;
}
.top_nav_left .active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.top_nav_left .arrow {
border-color: white transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
js代码
(function($) {
$.fn.fixedMenu = function() {
return this.each(function() {
var menu = $(this);
menu.find('ul li > a').bind('click', function() {
if (menu.find('li:first').hasClass('active')) {
menu.find('li:first').removeClass('active');
}
else {
menu.find('li:first').addClass('active');
}
})
});
}
})(jQuery);
var obj=document.getElementById('s');
function hide(){
obj.style.display='none';
}
function show(){
obj.style.display='block'
}
$('document').ready(function(){
$('.top_nav_left').fixedMenu();
$(':not(body)').click(function(e){
if(!$(e.target).is('div.top_nav_left *')){
var menu = $('.top_nav_left');
menu.find('li:first').removeClass('active');
}
return false;
})
});
效果图:
相关推荐
NULL 博文链接：https://nqp-java.iteye.com/blog/1836164
10.24 在列表框中实现加载更多效果 10.25 自定义选择菜单 10.26 使用多个选择菜单进行组合选择 10.27 使用多选菜单选择多个值 10.28 创建双重范围的滑块 10.29 实现开关效果的选择功能 10.30 创建主题化的表单效果 ...
60 3.16 创建“返回顶部”链接 63 3.17 提供“更多……”链接 64 3.18 以动画效果显示文本 67 3.19 以滑动效果来替换文本 70 3.20 使图像滚动 71 3.21 确定被按下的键 75 3.22 防止事件冒泡 77 3.23 链接多个活动 80...
本文将介绍如何实现多限级导航菜单。 目录 1.静态多级菜单实现 2.动态多级菜单实现 1. 静态多级菜单实现 要实现多级菜单，我们要分两步走，第一步就是把静态菜单的功能实现，通过纯静态的HTML代码
更多升级内容请看升级补本说明... 飞飞影视导航系统前台页面 飞飞影视导航系统后台管理 后台路径：域名/admin.php 用户名与密码：admin admin888 后台页面 相关阅读 同类推荐：站长常用源码
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...
2.[修复]前台页头导航栏二级栏目模式为单篇页时，链接无效BUG 2012年02月10日 ★更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。 1.[新增]后台新增文章时作者栏 加入{%称呼%}自动...
创建安全的菜单及工具栏201 隐藏菜单项201 创建登录工具栏202 75支持客户端认证203 处理认证失败203 拦截响应204 HTTP响应拦截器204 创建securityInterceptor服务205 创建securityRetryQueue服务207 通知...
[ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP...