苏州网站建设：boosstrap3打造全屏菜单和无限极菜单

如今使用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 > [网址不可见]-left {
	left: -100%;
}

.navbar .dropdown-submenu:hover > .dropdown-menu {  
   	display: block;
}
/*----------------全屏菜单-----------------------*/
.navbar [网址不可见]-menu-fullwidth .dropdown-menu {
  	left: 0;
  	right: 0;
  	overflow: hidden;
}

以上为css样式