0
我試圖用響應編碼html頁面當我重新調整大小時,我的菜單被切斷了。我想在此頁面中對菜單進行編碼,如菜單http://www.templatemonster.com/demo/58695.html任何幫助?菜單欄在重新調整窗口大小時被截斷
我試圖用響應編碼html頁面當我重新調整大小時,我的菜單被切斷了。我想在此頁面中對菜單進行編碼,如菜單http://www.templatemonster.com/demo/58695.html任何幫助?菜單欄在重新調整窗口大小時被截斷
我創建像在網站菜單菜單,
HTML:
<div class="menu">
<i class='theIcon'></i>
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Services </a> </li>
<li> <a href="#"> Blog </a> </li>
<li> <a href="#"> Gallery </a> </li>
<li> <a href="#"> Contacts </a> </li>
</ul>
</div>
風格:
.menu{
text-align:center;
overflow:hidden;
}
.menu .theIcon{
display: inline-block;
width: 20px;
height: 8px;
position: relative;
cursor: pointer;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
.menu .theIcon:before{
content: '';
width: 100%;
height: 2px;
background: black;
position: absolute;
top: 3px;
left: 0;
}
.menu ul{
float:right;
margin:0;
padding:0;
display:none;
position: absolute;
top: 40px;
right: 5%;
left: 5%;
background: #CFD8DC;
text-align:left;
}
.menu ul li{
list-style:none;
}
.menu ul li a{
padding:10px;
display:block;
}
@media only screen and (min-width: 769px) {
.menu .theIcon{
display:none;
}
.menu ul{
position:static;
width:auto;
display:block !important;
background:none;
}
.menu ul li{
float:left;
}
.menu ul li a{
padding:0 10px;
}
}
和腳本:這裏
$('.menu .theIcon').click(function(){
$(this).next('ul').fadeToggle(300);
});