За последние 24 часа нас посетили 21034 программиста и 1107 роботов. Сейчас ищет 451 программист ...

Страница со свернутым меню

Тема в разделе "JavaScript и AJAX", создана пользователем vladdvin891, 1 мар 2021.

  1. vladdvin891

    vladdvin891 Новичок

    С нами с:
    1 мар 2021
    Сообщения:
    2
    Симпатии:
    0
    Видел в интернете сайт со сворачивающимся боковым меню

    [​IMG] [​IMG]

    Есть код (должно сворачиваться в колонку сбоку при щелчке на иконку и разворачиваться при наведении)

    Код (Text):
    1. <style type="text/css">
    2. * {
    3.   list-style: none;
    4.   text-decoration: none;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. ul {
    10.   background: #afafaf;
    11.   display: inline-block;
    12.   width: 420px;
    13.   border-right: 1px solid #000;
    14. }
    15.  
    16. ul li {
    17.   padding: 6px 0;
    18.   background: #fff;
    19.   display: inline-flex;
    20.   align-items: center;
    21.   justify-content: space-between;
    22. }
    23.  
    24. ul li:hover {
    25.   background: lightgreen;
    26. }
    27.  
    28. ul li a {
    29.   color: #000;
    30. }
    31.  
    32. ul li:hover a,
    33. ul li:hover .fa {
    34.   color: #fff;
    35. }
    36.  
    37. ul li .fa {
    38.   display: inline-block;
    39.   width: 30px;
    40.   height: 30px;
    41.   display: inline-flex;
    42.   align-items: center;
    43.   justify-content: center;
    44. }
    45.  
    46. .leftside {
    47.   margin-left: 16px;
    48.   display: inline-block;
    49.   width: 30px;
    50.   height: 30px;
    51.   display: inline-flex;
    52. }
    53.  
    54. .rightside {
    55.   margin-right: 16px;
    56.   visibility: hidden;
    57.   width: 30px;
    58.   height: 30px;
    59.   display: inline-flex;
    60. }
    61.  
    62. .centerplace {
    63.   width: 328px;
    64.   display: inline-flex;
    65.   align-items: center;
    66.   justify-content: space-between;
    67. }
    68.  
    69. .nestedblock{
    70.   display: inline-flex;
    71.   align-items: center;
    72.   justify-content: center;
    73.   margin:0 auto;
    74. }
    75. </style>
    76. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    77. <script src="testsite.js">
    78. let elemmenuitemli = document.querySelectorAll('.fa');
    79. let sidemenu = document.querySelector('#sidemenu');
    80.  
    81. elemmenuitemli.addEventListener("onmouseenter", checkitem);
    82. elemmenuitemli.addEventListener("onmouseleave", checkitem);
    83.  
    84.  
    85. function checkitem() {
    86.     if sidemenu.classList.contains("active")
    87.     {
    88.         /* Удаление меню ul*/
    89.         sidemenu.delete();
    90.         /* Сворачивание меню ul */
    91.         <ul id="sidemenu">
    92.   <li>
    93.     <div class="leftside">
    94.     <i class="fa fa-home"></i>
    95.     </div>
    96.   </li>
    97.   <li>
    98.     <div class="leftside">
    99.     <i class="fa fa-home"></i>
    100.     </div>
    101.   </li>
    102.   <li>
    103.     <div class="leftside">
    104.     <i class="fa fa-home"></i>
    105.     </div>
    106.   </li>
    107.   <li>
    108.     <div class="leftside">
    109.     <i class="fa fa-home"></i>
    110.     </div>
    111.   </li>
    112.   </li>
    113. </ul>
    114.     }
    115.     else {
    116.         /* Удаление меню ul*/
    117.         sidemenu.delete();
    118.         <ul id="sidemenu">
    119.   <li>
    120.     <div class="leftside">
    121.     <i class="fa fa-home"></i>
    122.     </div>
    123.     <div class="centerplace">
    124.     <a href="" class="nestedblock">Техника для кухни</a>
    125.     </div>
    126.     <div class="rightside">
    127.     <i class="fa fa-home"></i>
    128.     </div>
    129.   </li>
    130.   <li>
    131.     <div class="leftside">
    132.     <i class="fa fa-home"></i>
    133.     </div>
    134.     <div class="centerplace">
    135.     <a href="" class="nestedblock">Бытовая техника для дома</a>
    136.     </div>
    137.     <div class="rightside">
    138.     <i class="fa fa-home"></i>
    139.     </div>
    140.   </li>
    141.   <li>
    142.     <div class="leftside">
    143.     <i class="fa fa-home"></i>
    144.     </div>
    145.     <div class="centerplace">
    146.     <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    147.     </div>
    148.     <div class="rightside">
    149.     <i class="fa fa-home"></i>
    150.     </div>  
    151.   </li>
    152.   <li>
    153.     <div class="leftside">
    154.     <i class="fa fa-home"></i>
    155.     </div>
    156.     <div class="centerplace">
    157.     <a href="" class="nestedblock">Комплектующие</a>
    158.     </div>
    159.     <div class="rightside">
    160.     <i class="fa fa-home"></i>
    161.     </div>  
    162.   </li>
    163.   </li>
    164. </ul>
    165. sidemenu.classList.add('active');
    166.         /* Разворачивание меню ul */
    167.     }
    168. }
    169. </script>
    170. <ul id="sidemenu">
    171.   <li>
    172.     <div class="leftside">
    173.     <i class="fa fa-home"></i>
    174.     </div>
    175.     <div class="centerplace">
    176.     <a href="" class="nestedblock">Техника для кухни</a>
    177.     </div>
    178.     <div class="rightside">
    179.     <i class="fa fa-home"></i>
    180.     </div>
    181.   </li>
    182.   <li>
    183.     <div class="leftside">
    184.     <i class="fa fa-home"></i>
    185.     </div>
    186.     <div class="centerplace">
    187.     <a href="" class="nestedblock">Бытовая техника для дома</a>
    188.     </div>
    189.     <div class="rightside">
    190.     <i class="fa fa-home"></i>
    191.     </div>
    192.   </li>
    193.   <li>
    194.     <div class="leftside">
    195.     <i class="fa fa-home"></i>
    196.     </div>
    197.     <div class="centerplace">
    198.     <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    199.     </div>
    200.     <div class="rightside">
    201.     <i class="fa fa-home"></i>
    202.     </div>  
    203.   </li>
    204.   <li>
    205.     <div class="leftside">
    206.     <i class="fa fa-home"></i>
    207.     </div>
    208.     <div class="centerplace">
    209.     <a href="" class="nestedblock">Комплектующие</a>
    210.     </div>
    211.     <div class="rightside">
    212.     <i class="fa fa-home"></i>
    213.     </div>  
    214.   </li>
    215.   </li>
    216. </ul>
    Почему оно не работает вышеуказанным образом?
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.734
    Симпатии:
    1.315
    Адрес:
    Лень
    потому что нарушил синтаксис во функции function checkitem(), смешал с html