Welcome, Old Sport!

鼠标悬停动画二级导航菜单教程

by ilikecss ON 2016/05/24 2029

鼠标悬停动画二级导航菜单教程忙里偷闲,争取每周可以更新一篇教程。如今互联网上开源的前端导航的例子其实已经很多了,只要在百度搜索一下就有许多结果。今天要介绍这款”鼠标悬停动画二级导航菜单”,兼容性很好。

HTML

<ul id="gnav">
    <li id="gnav_01"><a href="#" class="gnav_link">menu1<span><span>menu1</span></span></a></li>
    <li id="gnav_02"><a href="#" class="gnav_link">menu2<span><span>menu2</span></span></a></li>
    <li class="mega" id="gnav_03">
        <a href="javascript:void(0)" class="gnav_link">sub menu<span><span>sub menu</span></span></a>
        <div class="mega_menu_wrapper">
            <div class="mega_menu">
                <ul class="mega_menu_inner">
                    <li class="mega_list">
                        <a href="#">
                            <img width="130" height="80" alt="" src="imgs/img_gnav_special_clock.jpg">
                            <div class="mega_ttl">title</div>
                            <p>text</p>
                        </a>
                    </li>
                    <li class="mega_list">
                        <a href="#">
                            <img width="130" height="80" alt="" src="imgs/img_gnav_special_tri.jpg">
                            <div class="mega_ttl">title</div>
                            <p>text</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

CSS

#gnav {
    float: left;
    margin-left: 30px;
    padding-top: 50px;
}
#gnav > li {
    float: left;
    margin-right: 20px;
}
#gnav > li a, 
#gnav > li a span {
    display: block;
	height: 40px;
}
#gnav > li a.gnav_link {
	font-size: 20px;
	padding: 3px 15px 0;
	text-decoration: none;
	color: #00a8e8;
	font-weight: 300;
}
#gnav > li a {
    position: relative;
}
#gnav > li a span {
    background-color: #00a8e8;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
	color: #FFF;
}
#gnav > li#gnav_01 a > span {
    width: 0;
}
#gnav .mega {
    position: relative;
}
.mega_menu_wrapper {
    background-color: #00a8e8;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 40px;
    width: 0;
}
.mega_menu {
    background-color: #00a8e8;
    overflow: hidden;
    width: 0;
}
.mega_menu_inner {
    overflow: hidden;
    padding: 20px;
    width: 0;
}
.mega_menu_inner > li {
    float: left;
    margin-left: 20px;
    width: 130px;
}
.mega_menu_inner > li:first-child {
    margin-left: 0;
}
#gnav .mega_menu .mega_list a {
    color: #fff;
    display: block;
    height: 100%;
	text-decoration: none;
}
#gnav .mega_menu .mega_list a:hover {
    text-decoration: underline;
}
.mega_menu .mega_list a > img {
    margin-bottom: 10px;
}
.mega_menu .mega_list a div.mega_ttl {
    margin-bottom: 10px;
	font-size: 12px;
}
.mega_menu .mega_list a > p {
	font-size: 12px;
}
#gnav > li a > span > span {
    position: absolute;
    width: 0;
	padding: 3px 15px 0;
}

需要引入的文件

jQuery v1.9.1
jquery.easing.1.3
common.js

浏览器兼容性

Chrome Safari Firefox Opera IE
1+ 1+ 1+ 1+ 7+

此款导航在PC主流浏览器下运行完美,本教程没有制作移动端的演示。

前端鲱鱼罐头

目前还没有评论



TOP