Я проектирую сайт моих друзей, и я в процессе создания меню навигации. Я использовал навигационные таблетки с навигационной накладкой внутри div, называемой навигацией, которая похожа на контейнер.Bootstrap 3 nav-stacked collapse
HTML:
<div id="navigation">
<a href="./" id="logo">Logo</a>
<ul class="nav nav-pills nav-stacked" style="padding-top:50px;">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Exile Support <small>Coming Soon</small></a></li>
<li class="nav-header disabled"><a href="#">Market</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> Server Ranks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
</ul>
CSS:
#navigation{
min-width: 200px;
margin: 0;
min-height: 800px;
float: left;
display: block;
clear: both;
font-size: 10px;
background: -webkit-linear-gradient(bottom,rgba(227,227,227,1) 0px,rgba(227,227,227,0) 40px),-webkit-linear-gradient(right,rgba(0,0,0,.12),rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 1px,transparent 30px,transparent 100%);
background: -moz-linear-gradient(bottom,rgba(227,227,227,1) 0px,rgba(227,227,227,0) 40px),-moz-linear-gradient(right,rgba(0,0,0,.12),rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 1px,transparent 30px,transparent 100%);
background: -webkit-linear-gradient(bottom,rgba(227,227,227,1) 0px,rgba(227,227,227,0) 40px),-webkit-linear-gradient(right,rgba(0,0,0,.12),rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 1px,transparent 30px,transparent 100%);
background: -o-linear-gradient(bottom,rgba(227,227,227,1) 0px,rgba(227,227,227,0) 40px),-o-linear-gradient(right,rgba(0,0,0,.12),rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 1px,transparent 30px,transparent 100%);
}
#navigation .nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background: #6E28C9;
margin-left: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
color: #b3c7e4;
}
#navigation .nav-pills > li > a {
border-radius: 0;
}
#navigation .nav-pills > li > a:hover{
box-shadow: inset 0 1px 5px #5f5f5f;
}
#navigation .nav > li > a {
padding: 10px 20px 20px;
}
#navigation .nav > li > a small{
color: #999999;
font-size: 7.7px;
float: right;
text-transform: uppercase;
}
#navigation .nav > li.disabled.nav-header > a {
cursor: default;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
#navigation .nav > li:nth-child(4) > a:hover {
box-shadow: none;
}
@media screen and (max-width: 768px){
#navigation .nav{
float: left;
}
}
Я попытался использовать @media, чтобы сделать навигацию толкать вверх сверху, но это не сработало. Итак, вот что я пытаюсь сделать:
Навигационные работы. Он просто не реагирует. Я бы хотел, чтобы он рухнул, как навигатор, и прыгнул в верхнюю часть страницы на мобильных устройствах, вместо того, чтобы оставаться в стороне. Ничто из того, что я делаю, не работает, и все, что я копирую в Интернете, не то, что мне нужно. Я пытаюсь, чтобы он рухнул, но вместо этого он просто прилипает к боку, когда я сжимаю окно, и все содержимое подталкивается под ним.
Fiddle: http://jsfiddle.net/9XrJp/