Блог

я никогда раньше не создавал веб-сайт, поэтому я вроде как его использую. я использую html css java, и до сих пор у меня не было проблем, и я в некотором роде в тупике.

у меня есть это меню для моего рабочего стола (http://puu.sh/H6daI/f9c757571f.png ), который функционирует именно так, как я хочу. однако в мобильном представлении (http://puu.sh/H6dba/27b97bc952.png ), я бы хотел, чтобы все в разделе «категории» свернулось и использовало указатель для расширения содержимого.

я действительно не знаю, как это сделать, и я не нахожу много помощи в Интернете. я бы предположил, что мне придется включить javascript, как я сделал для навигации по боковой панели в мобильном представлении, но это не складывается.

вот мой html и css, если это поможет

 <div class="sidemenu">
    <ul>
        <li class="init" > <embed src="images/pointer.svg" style="width: 100%;" ></embed></li>
        <li><a  style="font-weight: 500; pointer-events:none; font-size: 16px">Categories</a></li>
        <span class="line"></span>
        <li><a  href="shop.html" >All Sets</a></li>
        <li><a  href="featured.html" >Featured Sets</a></li>
        <li><a  href="popular.html" >Popular Sets</a></li>
        
       </li>
    </ul>
</div>
 

 .init {
    width: 2.5%;
   
}

  .sidemenu ul li.active a, .sidemenu ul li a:hover {
    text-decoration:none;
    color:rgb(82, 82, 82);
    background:#ffcccc no-repeat center top;
}

  .sidemenu a {
    text-decoration:none;
    color:rgb(0, 0, 0);
    margin: 48px;
    line-height: 48px;
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
}
 

 @media only screen and (min-width: 950px) {

.line {
        border-bottom: 1.5px solid rgb(58, 58, 58);
        display: block;
        
        width: 140px;
        margin-left: 46px;
        margin-bottom: 12px;
    }

    .sidemenu a {
        text-decoration:none;
        color:rgb(0, 0, 0);
        margin: 48px;
        line-height: 48px;
        font-weight: 400;
        cursor: pointer;
    }
}
 

вы можете добавить свойство «display: none» ко всему, что вы хотите свернуть в медиа-запросе css. я рекомендую поместить список меню в тег div. Таким образом, вам нужно будет только скрыть тег div.

Затем в javascript вы можете использовать событие щелчка по категориям. Когда пользователь нажимает на категории, свойство «отображать: блокировать» добавляется в список меню.

Вот некоторые javascript, которые вы можете использовать:

 // First get the categories element from html
const categories = document.getElementById('categories');

// Keep track if the menu is opened or not
let menuOpen = false;

// Also get the menu list that you should put in a div tag
const menuList = document.getElementById('menuList');

// Add event to th categories
categories.addEventListener('click', () => {
    // check is the menu is open or not

    if(!menuOpen) {
        // Its not opened than add display block to menu list
        menuList.style.display = 'block'

        // Change menuOpen to true
        menuOpen = true

    } else {
        // Menu is already open

        menuList.style.display = 'none'

        // Change menuOpen to false
        menuOpen = false
    }

});
 

Я предполагаю, что вы хотите добавить некоторые переходы в список меню, чтобы он выглядел красиво. Я рекомендую использовать свойство transition css.