如今使用boostrap3架設(shè)網(wǎng)站的越來(lái)越多，bootstrap除了不支持ie9一下的瀏覽器以外，在制作其網(wǎng)站方面還是非常不錯(cuò)的。響應(yīng)式框架是網(wǎng)站建設(shè)前端開(kāi)發(fā)的首先工具。今天蘇州千際軟件大魚給大家講解下如何應(yīng)用bootstrap3打造無(wú)限極下來(lái)菜單和全屏幕菜單功能。先看截圖：



看到以上的截圖大家是不是有點(diǎn)小激動(dòng)啊，其實(shí)非常非常簡(jiǎn)單。先說(shuō)css樣式的使用

/*--------------公共部分------------------------*/
.navbar .container {
  	position: relative;
}

.navbar .dropdown-menu {
  	left: auto;
}

.navbar .dropdown-menu > li {
  	display: block;
}

.navbar .dropdown {
  	position: static;
}
/*----------------下來(lái)菜單-----------------------*/

.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 > [網(wǎng)址不可見(jiàn)]-left {
	left: -100%;
}

.navbar .dropdown-submenu:hover > .dropdown-menu {  
   	display: block;
}
/*----------------全屏菜單-----------------------*/
.navbar [網(wǎng)址不可見(jiàn)]-menu-fullwidth .dropdown-menu {
  	left: 0;
  	right: 0;
  	overflow: hidden;
}

以上為css樣式