Как сделать меню свернутым при загрузке?

261

23 декабря 2017, 03:36

Я сделал адаптивное меню, но при загрузке страницы оно уже развернуто, а нужно, чтобы было свернутым. Я пытался пофиксить это, добавляя к #menu-item свойство display: block; после нажатия на кнопку, но тогда элементы меню выстраиваются горизонтально. Хочу, чтобы меню было закрытым при загрузке и элементы выстроены вертикально...

$(function() { 
	$('#ham').click(function() { 
		$('.dropdown').toggle(650); 
		$('nav a').addClass('dropdown-on'); 
	}); 
});

.dropdown { 
		display: none; 
	} 
 
	#ham { 
		display: block; 
		float: right; 
		margin:-40px 15px 0 0; 
		font-size: 20px; 
	} 
	 
	#menu-item { 
		display: block; 
		text-align: center; 
		font-weight: bold; 
		font-style: 14px; 
		text-transform: uppercase; 
		margin-top: 5px; 
	} 
 
	#menu-item:last-child{ 
		margin-bottom: 	10px; 
	} 
	#ham:hover, #menu-item:hover { 
		opacity: 0.55; 
		color: wheat; 
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1 class="logo"><a href="index.html">Orion</a></h1> 
<nav> 
		<i class="fa fa-bars" id="ham">V</i> 
		<a class="dropdown" id="menu-item" href="#sel">Shop</a> 
		<a class="dropdown" id="menu-item" href="#sss">About</a> 
		<a class="dropdown" id="menu-item" href="#">Blog</a> 
		<a class="dropdown" id="menu-item" href="#">Contact</a> 
</nav>

Answer 1

Примерно так: на jQuery обрабатываем а само меню свёрнуто

$(function() { 
  $('.unit').on('click', function() { 
    $('.menu').toggleClass('visible'); 
  }); 
});

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
  font-family: monospace; 
} 
 
ul { 
  padding: 10px; 
  display: inline-block; 
  background: #ccc; 
} 
 
ul li { 
  display: inline-block; 
} 
 
ul li a { 
  font-size: 1.4em; 
  text-transform: uppercase; 
  font-weight: 900; 
  color: #fff; 
} 
 
ul li:hover a { 
  color: #000; 
} 
 
.unit { 
  width: 30px; 
  display: inline-block; 
  overflow: hidden; 
  padding-left: 5px; 
  padding-top: 3px; 
  cursor: pointer; 
} 
 
.unit:hover i { 
  background: #000; 
} 
 
.unit i { 
  display: block; 
  width: 25px; 
  height: 7px; 
  background: #ccc; 
  margin: 4px auto; 
} 
 
.unit, 
.menu { 
  vertical-align: top; 
} 
 
.menu { 
  width: 0; 
  height: 0; 
  visibility: hidden; 
  transition: all .3s; 
  opacity: 0; 
  transform: translate(-10000px, 0); 
} 
 
.visible { 
  width: auto; 
  height: auto; 
  opacity: 1; 
  visibility: visible; 
  transform: translate(0, 0); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="top"> 
  <span class="unit">  
     <i></i>  
     <i></i> 
     <i></i>  
   </span> 
  <ul class="menu"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">blog</a></li> 
    <li><a href="#">cinema</a></li> 
    <li><a href="#">tauch my</a></li> 
    <li><a href="#">potrfolio</a></li> 
  </ul> 
</div>

Answer 2

Ужастно сделано, id это уникальный идетификатор, его нельзя задавать более чем одному элементу, не задавай id чему попало.

$(function() { 
    $('.open-menu').click(function() { 
        $('.dropdown').toggle(650); 
    }); 
});

.header { 
    display: flex; 
    justify-content: space-between; 
    height: 30px; 
    padding: 0 20px; 
    position: relative; 
} 
.open-menu { /** при обычно разрешении скрываешь **/ 
    display: none; 
} 
.dropdown__item {; 
    text-align: center; 
} 
@media screen and (max-width 768px) { /* ну  тут свое поставишь разрешение */ 
    .open-menu { 
        display: block; 
    } 
    .dropdown { 
        display: none; 
        position: absolute; 
        left: 0; 
        right: 0; 
        top: 100%; 
    } 
    .dropdown__item { 
        display: block 
     } 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
  <header class="header"> 
      <a class="logo" href="index.html">Orion</a> <!--тоже странная штука, если это лого то просто <a href="index.html">Orion</a> без h1, h1 это заголовок страницы. --> 
      <i class="fa fa-bars open-menu">≡</i> 
      <nav class="dropdown"> 
          <a class="dropdown__item" href="#sel">Shop</a> 
          <a class="dropdown__item" href="#sss">About</a> 
          <a class="dropdown__item" href="#">Blog</a> 
          <a class="dropdown__item" href="#">Contact</a> 
      </nav> 
  </header> 
</body> 
</html>

Answer 3

Давайте по порядку: 1. id должны различаться! 2. скопировал форматирование в .dropdown 3. в hover отображаем меню

  
.dropdown { 
    display: none; 
    text-align: center; 
    font-weight: bold; 
    font-style: 14px; 
    text-transform: uppercase; 
    margin-top: 5px; 
} 
 
nav:hover >.dropdown{ 
    display: block; 
}

<h1 class="logo"><a href="index.html">Orion</a></h1> 
<nav> 
		<i class="fa fa-bars" id="ham">V</i> 
		<a class="dropdown" id="menu-item1" href="#sel">Shop</a> 
		<a class="dropdown" id="menu-item2" href="#sss">About</a> 
		<a class="dropdown" id="menu-item3" href="#">Blog</a> 
		<a class="dropdown" id="menu-item4" href="#">Contact</a> 
</nav>