Форум

monsterito · #1 (**permalink**) 11.02.2017, 19:00

решено

рони · #2 (**permalink**) 11.02.2017, 20:19

monsterito,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
    * {
  padding: 0;
  margin: 0;
}
ul {
    list-style: none;
}

.main-container {
  display:flex;
  padding: 20px 0;
}

.sidebar {
  flex: 3;
}

aside a {
  color: #000;
  display: block;
  padding: 8px 30px;
}

.sidebar aside {
 margin-right: 50px;
 border: 1px solid #e2e1e1;
 cursor: pointer;
 background: white;
 margin-right: 35px;
}

.mobile {
  display:none;
      padding: 15px 20px;
    background: rgba(33, 32, 32, 0.83);
    color: #fff;
    letter-spacing: 5px;
}

.our-menu {
    padding: 15px 20px;
    background: rgba(33, 32, 32, 0.83);
    color: #fff;
    letter-spacing: 5px;
}

.invisible {
  display: none;
}

.sub-menu li {
 background: #f7f7f7;
}

.side-menu li {
      transition: all .3s;
}
.side-menu li .sub-menu li{
    font-style: italic;
    font-size: 16px;
}

.side-menu  li:hover{
   background: #e8e8e8;
}

.side-menu > li > a, .side-menu > li > span {
    padding: 10px 18px;
    display: block;
    font-size: 18px;
    border-top: 1px solid #eeeeee;
}

.active {
    background: #e8e8e8;;
}

.main {
  flex: 9;
}
.side-menu > li:first-child{
    display:  block;
}
.side-menu > li:last-child{
    display: none;
}

@media (max-width : 992px) {
 .main-container {
       display: block;
   }
.our-menu {
  display: none;
}

.mobile {
  display:block
}

.side-menu > li:first-child{
    display: none;
}
.side-menu > li:last-child{
    display: block;
}
}

  </style>

  <title></title>







<script>
$(function(){
    $a = $('.side-menu > li > span');
    $a.on('click', function(event) {
        event.stopPropagation();
        $(this).next().slideToggle(300);
    });
    $(".mobile").on('click',function() {
       $(".side-menu > li:last-child").slideToggle(300);
      })
 });
</script>


</head>

<body>
  <div class="main-container">
  <div class="sidebar">
    <aside>
       <h3 class="our-menu"><i class="fa fa-bars"></i>Меню</h3>
       <div class="mobile"><h3><i class="fa fa-bars"></i>Меню</h3></div>
          <ul class="side-menu">
             <li><span>Основное меню</span>
                <ul class="sub-menu">
                  <li><a href="index.php" class="sub-list" data="1">Холодные закуски</a></li>
                  <li><a href="index.php" class="sub-list" data="2">Горячие закуски</a></li>
                  <li><a href="index.php" class="sub-list" data="3">Первые блюда</a></li>
                </ul>
              </li>
              <li><span>Второе меню</span>
                 <ul class="sub-menu">
                  <li><a href="index.php" class="sub-list" data="14">Первые блюда</a></li>
                  <li><a href="index.php" class="sub-list" data="15">Вторые блюда</a></li>
                  <li><a href="index.php" class="sub-list" data="16">Сладкие блюда</a></li>
                 </ul>
              </li>
           </ul>
    </aside>
  </div>
  <div class="main">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nostrum explicabo rem dolorem vel vero culpa repellat ipsa maiores, optio alias tempora ducimus voluptates et neque unde. Quia necessitatibus, deserunt!</div>
<div>Vero eius molestias exercitationem non molestiae, sint aspernatur. Quos voluptatum modi vitae minima eos magni quas nesciunt architecto, odio vel explicabo officiis hic, voluptates ut. Repudiandae voluptatum maxime eos consequatur!</div>
<div>Quasi mollitia illo, aliquid rerum atque ipsum accusantium, maiores nulla, repudiandae quo libero rem. Mollitia dolore, ipsum asperiores praesentium voluptatum, aliquam laudantium magnam nemo, tenetur rerum iusto quo laboriosam ullam.</div>
<div>Expedita minima accusantium asperiores vel doloremque, unde est nulla dolore debitis dolorem, corrupti eos earum nemo, sunt, quos quidem perferendis. Harum enim praesentium vero quo id tempore, voluptatum aliquid cumque.</div>
<div>In repellat, vel impedit delectus fugiat eligendi eum expedita aspernatur velit hic provident veniam quaerat nostrum assumenda, id ducimus? Maxime eligendi dolores laboriosam. Molestias eius est dicta eaque in! Et!</div>
<div>Totam possimus officiis odio necessitatibus, ratione repellendus id nesciunt delectus explicabo, amet inventore quaerat, laborum mollitia earum quos nihil eaque at quisquam suscipit non officia unde. Excepturi dignissimos eaque, facere.</div>
<div>Fugiat voluptas nam repudiandae sed facere, iste, quae enim cum! Quaerat distinctio sed consequuntur neque dolores, necessitatibus totam animi cum veniam, ad obcaecati assumenda iste tempore, itaque nostrum eius sint!</div>
<div>Voluptatibus minima inventore consequatur voluptatem dolorem quia illum doloremque ducimus provident veritatis voluptates natus amet assumenda, ullam sequi delectus distinctio eum repudiandae quibusdam quod aspernatur voluptate, culpa itaque dolore. Nemo.</div>
<div>Possimus placeat ipsa asperiores doloribus, totam, unde provident illo, cumque, ut similique dolore iure. At ex explicabo iure officiis numquam eligendi aliquam tempore dolores aut distinctio quibusdam quaerat minima, obcaecati.</div>
<div>Quia voluptatem sed nam possimus qui ad doloremque quos placeat, sequi laboriosam sunt maiores distinctio repellat laborum, cum labore iste illo vitae. Aut expedita modi, tempora laborum! Neque, nulla, blanditiis.</div>
</div>
</div>

</body>
</html>

monsterito · #3 (**permalink**) 11.02.2017, 20:35

рони, что-то не то. Почему в мобильной версии Основное меню скрыто? А в обычном - Второе меню? + Если кликнуть на Основное меню в обычной версии, то оно скрывается и появляется. И при клике на "меню" в обычной версии оно делает слайд, хотя не должно. Что-то багов много. Сами покликайте и увидите

monsterito · #4 (**permalink**) 11.02.2017, 20:48

Еще раз объясню: Есть Меню. У него 2 категории - Основное и Второе. У этой категории есть свои подпункты.

Второе меню изначально закрыто и имеет класс invisible (так задумано), а Основное раскрыто. При клике на Меню в десктоп версии эти 2 категории(которые выше) скрываться не должны, только в моб. версии.

Далее. Если мы в мобильной версии нажмем на Второе меню, а затем перейдем в декстоп версию, то Основное меню должно закрыться, а Детское появиться.
Ради теста попробуйте нажать на Основное меню в моб.версии, то в десктоп версии Второе меню так и будет в закрыто!!! но, если нажмете на Второе меню в моб. версии, а затем перейдете в десктоп версию, то увидите, что Основное меню открыто как и Второе. Так не должно быть

рони · #5 (**permalink**) 11.02.2017, 21:00

monsterito,
ничего не понял, но что-то изменил, посмотрите снова пост №2

monsterito · #6 (**permalink**) 11.02.2017, 21:03

рони, не, так лагает и также не то.. Почему у вас в моб. версии только Второе блюдо показывает? А где Основное?

Блин, даже сложно объяснить еще более понятней)

рони · #7 (**permalink**) 11.02.2017, 21:11

monsterito,
я пас, помог чем мог

monsterito · #8 (**permalink**) 11.02.2017, 21:12

рони, понял. жаль(

Форум

Справочник

Discord чат

Курсы javascript