本章节分享一段代码实例，它实现了手风琴方式展开和折叠导航菜单效果。代码实例如下:代码实例如下:脚本之家dl{width:150px;} dl,dd{margin:0;} dt{background:gray;font-size:14px;padding:2px;margin:2px; } dt{color:#FFF;} dd a{color:#000;font-size:12px; } ul{list-style:none;padding:2px; }$(document).ready(function(){$("dd:not(:first)").hide();$("dt a").click(function(){$("dd:visible").slideUp("slow");$(this)....
本文介绍一种比较常见的导航菜单是如何实现的，它具有垂直结构，点击导航主标题可以展开或者折叠二级菜单。 代码实例如下:垂直导航菜单body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53", "Arial Narrow";background:#fff; } form, ul, li, p, h1, h2, h3, h4, h5, h6{margin:0;padding:0; } input, select{font-size:12px;line-height:16px; } img{border:0;} ul, li{list-style-type:...
本文实例为大家分享jquery实现百度新闻导航菜单滑动动画，供大家参考，具体内容如下 思路与步骤 1.利用UL创建简单横向导航；仿百度新闻菜单滑动动画body, div, ul, li, a{margin: 0px;padding: 0px;font-size: 20px;color: #FFF;border: 0;}.div-nav-container{margin-top: 50px;width: 100%;background-color: #01204F;}.div-nav{width: 870px;margin: 0px auto;}ul{list-style: outside none none;width: 100%;height: 50px;}ul ...
一、实现效果1.初始化效果：未添加样式和特效2、添加CSS样式3、最终效果二、JQuery代码$(document).ready(function(){ $(".level>a").click(function(){ $(this).addClass("current") //给当前元素添加current样式 .next().show() //下一个元素显示 .parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素移除“current”样式 .next().hide(); //他们的下一个元素隐藏 return false; }) })三、完整...
经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;} .tab dt a.on{background:#fff;color:#333;fon...
方式一：直接编写代码实现 效果如下： 代码如下： 代码如下: 无需表格的菜单 body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } #navigation li { border-bottom:1px solid #ED9F9F; /* 添加下划线 */ } #navigation li a{ display:block; /* 区块显示 */ padding:5px 5px 5px 0.5em; text-decora...
手风琴 *{ padding:0; margin:0; } body{ background:#fafafa; font-size:12px; } .slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; } .slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidden; background:#1b1b1b; border-bottom:1px solid #fff; height:32px; line-height:32px; } .slider dt.slider_open{background:#707070; color:# } .sl...
下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 代码如下: body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFDD2} .optn{width:190px;line-height:28px;border-top:dashed 1px #ccc} .content{padding-top:10px;clear:left} a{text-decoration:none;colo...
导航按钮是网站的非常重要的一部分，因其将网站的所有部分而集中一处，jQuery导航菜单插件在其中扮演重要的角色。 本文介绍了14个很酷的jQuery导航菜单插件，它们够漂亮、简单，并且完全兼容各种类型的web浏览器。1.Facets Navigation Demo | Download2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Download 5.Cool Animated Menu Demo | Download 6.Apple Navigation...
1. Apple Menu Style 2. Color Fading Menu3. Animated Drop Down Menu 4. Random Link Color5. Scrollable 6. Moo Tool Homepage like 7. Animated Menu 8. jqDock Menu 9. Sliding jQuery Menu 10. CSS Mac Book Menu 11. Kwicks 12. Fading Menu with Content Replacing 13. Garage door effect 14. jQuery idTabs 15. Lavalamp
导航菜单比较实用，当然还是选择经典的，代码最少的，效果最好的喽，各位童鞋请围观哦，废话不说， 效果图如下，欢迎评价： 看代码： 代码如下: 一款带动画效果的经典二级导航菜单Jquery特效 html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;} ul,li {list-style-type:none; text-transform:capitalize;} clear{clear...
下面和大家分享一下具体的实现过程。 HTML标签结构:代码如下: 菜单一菜单一 菜单二菜单二 菜单三菜单三 菜单四菜单四 CSS样式：li的样式：代码如下:.animation_menu li{ /*块状模式显示，并使其水平平铺显示*/ display:block; float: left;/*宽高是背景图片的*/ width: 111px; height: 50px;/*设置文字垂直水平居中*/ line-height: 5...
代码如下: CSS:用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果 javascript：hover()触发移动鼠标到导航nav的动作，和移出导航nav的动作（即返回到current导航） jQuery弹性滑动导航菜单 body{ font-family:"Microsoft YaHei";} #nav_wrapper{ position:relative; width:835px; margin:80px auto; border-bottom:2px #ddd solid;} #nav_wrapper #nav_menu{ height:50px;} #nav_wrapper #nav_menu a{ dis...
本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中. (1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的p, 这个p向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口. (2) 在图片中标号2处如何实现每个连...
jquery导航是一个网站必不可少的模块，当一个用户在一个网站上浏览的时候，为了某个目的而查看网站导航栏的时候，突出导航栏的效果是重中之重。因此必须要使用一个效果：jquery遮罩层。利用明暗效果来突出当前用户的操作。 代码如下:$(function() {var $oe_menu= $(#oe_menu);var $oe_menu_items= $oe_menu.children(li);var $oe_overlay= $(#oe_overlay); $oe_menu_items.bind(mouseenter,function(){var $this = ...