CSS实现方法

使用相对定位和绝对定位，先隐藏二级栏目，鼠标经过后设为可见，并结合css动画效果。

li{list-style: none;text-align:center; }
a{text-decoration: none;}
li.item{position: relative;width: 130px;background: red;
}
ul {margin: 0;padding: 0;position: absolute;left: 0;/* margin-left: -36px;  */width: 130px;background:yellow;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;-moz-transform: translateY(-10%);-o-transform: translateY(-10%);-ms-transform: translateY(-10%);-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;filter: alpha(opacity=0);visibility: hidden;
}
li.item:hover ul{-moz-transform: translateY(0);-o-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;filter: alpha(opacity=100);visibility: visible;
}

<li class="item"><a href="">一级栏目</a><ul><li><a href="">二级栏目</a></li><li><a href="">二级栏目</a></li></ul>
</li>

效果如下：

JQuery实现方法

先将submenu隐藏，再用slideDown()和slideUp()这两个方法实现。

li{list-style: none; width: 130px;text-align: center;}
a{text-decoration: none;}
li.item{background-color: red;}
.submenu{display: none;padding: 0;margin:0;background-color: yellow;}
.submenu li{padding: 0;display: block;}
.submenu li:hover{background-color: green;}

<li class="item"><a href="">一级栏目</a><ul class="submenu"><li><a href="">二级栏目</a></li><li><a href="">二级栏目</a></li></ul>
</li>

$(function(){$("li.item").hover(function() {$(this).find('.submenu').stop(true,true).slideDown();}, function() {$(this).find('.submenu').stop(true,true).slideUp();});})

效果和css类似，但用jquery实现代码相对简单易懂，呈现的效果更好！

CSS/JQuery实现二级菜单栏下滑相关推荐

HTML+CSS制作二级菜单栏
今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈! 效果图附上: 首先:我已链接了外部样式重 ...
静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端移动端代码左侧导航 *{ margin:0; padding:0; } #header ...
php实现二级下拉菜单,jquery,_用jquery实现二级下拉菜单，jquery - phpStudy
用jquery实现二级下拉菜单 A B C D E F A B C D E F 这种下拉列表怎么做?当鼠标移动到li>a上,显示对应的div.而且鼠标能移动到div上,二级菜单不消失. 引用文字 ...
网页二级菜单栏的几种做法
网页二级菜单栏的第一种做法,纯css 第一种:纯css的写法: <!DOCTYPE html> <html lang="en"> <head>& ...
导航栏以及二级菜单栏（下拉列表）的制作
作为新手小白,在我们熟悉了HTML , CSS,JS的功能和语法之后,Web前端开发中,更重要的还有界面的美化,主要依据CSS的庞大功能来实现,今天我来给大家分享的是,利用html代码来实现横向导航栏 ...
webservice的css哪里添加,jQuery_XML+XSLT+CSS+JQuery+WebService组建Asp.Net网(2)， 3.　　　　　　更 - phpStudy...
XML+XSLT+CSS+JQuery+WebService组建Asp.Net网(2) 3. 更易于搜索引擎收录.首先就是此方案可以被搜索引擎收录,而Ajax方案的弊端就在这里:其次,搜索引擎喜欢冗余 ...
html动画效果放大,一个CSS+jQuery实现的放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 功能 : 在 ...
十六个 HTML,CSS,jQuery,WordPress等快速启动项目样板
样板是可以重用在许多地方的一套代码文件,只需很少或根本不需修改.然而,这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础.另外,这也是学习编码技巧和窍门的好地方. 样板是非常有用的 ...
CSS+jQuery实现滑动幻灯片实例详解
HTML部分代码 Start with having a wrapping container div called main_view , and two sections nested insid ...

CSS/JQuery实现二级菜单栏下滑

CSS实现方法

JQuery实现方法

CSS/JQuery实现二级菜单栏下滑相关推荐

最新文章

热门文章