0

Я сделал адаптивное меню, но при загрузке страницы оно уже развернуто, а нужно, чтобы было свернутым. Я пытался пофиксить это, добавляя к #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>

2
  • тегу nav добавить стиль display:none; (а при клике в js менять на inline-block) - элемент скроется и место занимать не будет, если вы хотите убирать видимость, а место оставлять, воспользуйтесь visibility:hidden;.
    – And
    21 дек 2017 в 1:11
  • если добавить тегу нав стиль display: none; тогда не будет видно кнопки 21 дек 2017 в 1:17

3 ответа 3

3

Примерно так: на 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>

1

Ужастно сделано, 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>

0

Давайте по порядку: 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.