1

Есть следующее меню:

    * {
      margin: 1px;
      padding: 0px;
    }
    nav {
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.5;
      width: 200px;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    }
    .menu-item {
      background: #fff;
      width: 210px;
    }
    .menu-item h4 {
      color: black;
      font-size: 15px;
      font-weight: 500;
      padding: 7px 12px;
      background: grey;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    }
    .menu-item h4 a {
      color: white;
      display: block;
      text-decoration: none;
      width: 200px;
    }
    .menu-item ul {
      background: #fff;
      font-size: 13px;
      line-height: 30px;
      height: 0px;
      list-style-type: none;
      overflow: hidden;
      padding: 0px;
      /*Animation*/
      -webkit-transition: height 1s ease;
      -moz-transition: height 1s ease;
      -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
      transition: height 1s ease;
    }
    .menu-item:hover ul {
      height: 93px;
    }
<nav>
  <div class="menu-item alpha">
    <h4><a href="#">Сертификация</a></h4>
    <ul>
      <li><a href="#">Услуги</a>
      </li>
      <li><a href="#">Продукция</a>
      </li>
      <li><a href="#">Персонал</a>
      </li>
    </ul>
  </div>

  <div class="menu-item">
    <h4><a href="#">1</a></h4>
    <ul>
      <li><a href="#">1</a>
      </li>
      <li><a href="#">2</a>
      </li>
      <li><a href="#">3</a>
      </li>
    </ul>
  </div>

  <div class="menu-item">
    <h4><a href="#">2</a></h4>

  </div>

  <div class="menu-item">
    <h4><a href="#">3</a></h4>

  </div>

  <div class="menu-item">
    <h4><a href="#">Аттестация</a></h4>

  </div>

  <div class="menu-item">
    <h4><a href="#">Мониторинг</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">Учебный центр</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">4</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">4</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">Нормативная база(ГОСТы)</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">5</a></h4>

  </div>
  <div class="menu-item">
    <h4><a href="#">Вопрос-Ответ</a></h4>

  </div>
</nav>

(пример на jsfiddle)

Помогите сделать так, чтобы при загрузке 1 меню было открытым.

1 ответ 1

4
  1. Вместо height: 93px; лучше используйте параметр height: auto;, тогда меню откроется на всю высоту вне зависимости от количества пунктов

  2. По вашему вопросу:

Создайте класс .opened

.opened {height:auto;}

Затем присвойте его первому меню

<h4><a href="#">1</a></h4>
  <ul class="opened">
    ...
  </ul>

Готово

P.S.: В последствии, если вам нужно будет все же закрыть это меню, то просто удалите класс из элемента при помощи JS

// Пример на jQuery
$(".opened").removeClass("opened");

Ваш ответ

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

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