Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы навигация расширялась, когда я нажимаю кнопку, но теперь это то, что она выглядит так, как будто она плавает над остальными. Или что это другой div, созданный под ним.Развернуть навигацию по клику
Для более четкого понимания того, что происходит, я бы рекомендовал вам запустить фрагмент, потому что мне сложно объяснить, что на самом деле происходит.
Эта проблема относится только к мобильному меню.
Я также использую bootstrap css, но это эффекты onlt <div class="container">.
Вещи, которые я уже пытался решить эту проблему, является:
- Удален бутстраповским CSS
- Изменены
<nav>к сНу элементу - Изменены всем позиции в относительное
- изменившегося нечто о поплавок
Так что это наиболее важные части кода I использовать.
/*JS for the hide/show of the menu*/
$(document).ready(function() {
\t $(".menu-trigger").click(function() {
\t \t $(".menu").slideToggle(400, function() {
\t \t \t $(this).toggleClass("nav-expanded").css('display', '');
\t \t });
\t });
});
/*JS for the dropdown in the menu*/
$(document).ready(function() {
$("li").click(function() {
$('li > ul').not($(this).children("ul").slideToggle()).hide();
});
});body{
background-color: white;
}
.container{
background-color: #919191;
box-shadow: 0px 0px 2px black;
}
nav {
background: #7D7D7D;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 40px;
margin: 2px 10px;
}
nav ul, li, a {
margin: 0;
padding: 0;
}
nav a, a:link, a:visited, a:hover{
text-decoration: none;
color: white;
display: block;
}
ul > li {
list-style: none;
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
nav ul li a:hover{
border-radius: 4px;
background: #666666;
display: block;
}
nav ul li ul {
background: #333333;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
display: none;
position: absolute;
z-index:100;
}
nav ul li ul li {
float: none;
line-height: 40px;
width: 150px;
}
.menu-trigger{
display: none;
}
.burger{
background-color: white;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 5px auto;
}
@media screen and (max-width: 760px){
.menu-trigger{
display: block;
background-color: #BFBFBF;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
height: 35px;
padding: 5px 5px;
margin: 3px 10px;
width: 40px;
}
.nav-expanded{
display: block;
}
nav ul{
display: none;
background: #7D7D7D;
border-radius: 0 0 4px 4px;
}
nav ul li{
float: none;
padding: 0;
}
nav ul li:first-child{
margin-top: 5px;
}
nav ul li ul {
background: #7D7D7D;
box-shadow: none;
display: none;
position: relative;
z-index:0;
}
nav ul li ul li {
line-height: 35px;
width: 100%;
}
}
.active{
border-radius: 4px;
background-color: #404040;
}<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> \t \t
<title></title>
</head>
<body>
<div class="container">
<header>
<nav>
<button class="menu-trigger">
<span class="burger"></span>
<span class="burger"></span>
<span class="burger"></span>
</button>
<ul class="menu">
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li class="dropdown-trigger"><a href="#">Dropdown<span class="caret"></span></a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a> \t
</ul>
</nav>
</header> \t \t \t
</div> \t \t
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>Заранее спасибо за вашу помощь.
И если есть какие-то непонятные просьбы, и, возможно, я смогу сделать яснее. Также, если что-то не так с сообщением, я бы хотел его услышать.
У меня действительно не возникает вопрос. Вы хотите, чтобы эта кнопка меню расширялась, а затем показывала меню vor wat? – zeropublix
Что я хотел, так это позволить темному серому расшириться, когда вы нажмете на кнопку, а затем вы покажете меню. Спасибо за комментарий, но проблема уже решена. – Pretion