如今使用boostrap3架设网站的越来越多,bootstrap除了不支持ie9一下的浏览器以外,在制作其网站方面还是非常不错的。响应式框架是网站建设前端开发的首先工具。今天苏州千际软件大鱼给大家讲解下如何应用bootstrap3打造无限极下来菜单和全屏幕菜单功能。先看截图:
看到以上的截图大家是不是有点小激动啊,其实非常非常简单。先说css样式的使用
/*--------------公共部分------------------------*/
.navbar .container {
position: relative;
}
.navbar .dropdown-menu {
left: auto;
}
.navbar .dropdown-menu > li {
display: block;
}
.navbar .dropdown {
position: static;
}
/*----------------下来菜单-----------------------*/
.navbar .dropdown-submenu {
position: relative;
}
.navbar .dropdown-submenu > a:after {
top: 8px;
right: 9px;
font-size: 11px;
content: "f105";
position: absolute;
font-weight: normal;
display: inline-block;
font-family: FontAwesome;
}
.navbar .dropdown-submenu > .dropdown-menu {
top: 3px;
left: 100%;
margin-top: -5px;
margin-left: 0px;
}
/*Submenu comes from LEFT side*/
.navbar .dropdown-submenu > .dropdown-menu.submenu-left {
left: -100%;
}
.navbar .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
/*----------------全屏菜单-----------------------*/
.navbar .dropdown.mega-menu-fullwidth .dropdown-menu {
left: 0;
right: 0;
overflow: hidden;
}
以上为css样式