Добавление значка гамбургера в существующее меню навигации - PullRequest
0 голосов
/ 07 марта 2020

Я нашел учебник для меню навигации с позицией go слева. Но сейчас мне бы хотелось, чтобы на мобильных устройствах была иконка гамбургера, и я не знаю, как это сделать. К сожалению, я не смог найти учебник онлайн с моими конкретными потребностями c, но попытался использовать учебник для иконки гамбургера, но безуспешно и вернулся к началу.

<div class="container">
    <div class="logo">
        <img src="images/logo-large.png" alt="Nathan Ashbury Logo" class="image-1">

    </div>  
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Coding</a></li>
        <li><a href="#">Photography</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>  
</div>

```
.container {
    clear: both;
    overflow: auto;
}
nav {
    background-color: rgba(18,7,88,1.00);
    margin: 10px auto;
    text-align: center;
    width: 95%;
}
.logo img {
    float: left;
    width: 130px;
}
.image-2 {
    display: none;
}
.image-3 {
    display: none;
}
nav ul li {
    display: inline-block;
    padding: 10px;
    font-size: 20px;
    font-family: "Helvetica", sans-serif;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
}
nav ul li a:hover {
    text-transform: uppercase;
}

1 Ответ

0 голосов
/ 07 марта 2020

HTML

<html>
     <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

<body>
    <header>
        <h1>Example: Creating a hamburger menu</h1>
        <div class="top">
            <a href="#" class="menu_icon"><i class="material-icons">dehaze</i></a>
        </div>
    </header>
    <nav class="menu">
        <a href="#" class="item_menu">home</a>
        <a href="#" class="item_menu">about</a>
        <a href="#" class="item_menu">products</a>
        <a href="#" class="item_menu">services</a>
        <a href="#" class="item_menu">contact</a>
    </nav>
    <main>
        Site content.
    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>

CSS


* { margin: 0 auto; font-family: sans-serif; }

body { margin: 0 auto; }

header {
    height: 70px;
    background-color: #3e739d;
    border-bottom: 1px solid #494949;
    display: flex;
    align-items: center;
    justify-content: center;
}
header > h1 {
    width: calc(100% - 160px);
    text-align: center;
    font-size: 20px;
    color: white;
}
header > .top {
    position: absolute;
    left: 20px;
}
header > .top a.menu_icon i {
    color: #000;
    font-size: 40px;
    padding-top: 5px;
    transition: .2s ease;
}
header > .top a.menu_icon:hover i {
    color: #fff;
}
nav.menu {
    width: 300px;
    min-height: calc(100vh - 121px);
    background-color: #03a9f4;
    position: absolute;
    left: -300px;
    transition: .3s all;
}
nav.menu > a {
    display: block;
    padding: 5px;
    margin: 15px 0 0px 20px;
    color: #494949;
    text-transform: uppercase;
}
main {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}
footer {
    height: 50px;
    background-color: #494949;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    position: fixed;
    width: 100%;
}

.menu_show {
    left: 0!important;
}

@media screen and (max-width: 425px) {
    header h1 {
        font-size: 16px;
    }
}
@media screen and (max-width: 360px) {
    nav.menu {
        width: 100%;
        left: -100%; 
    }
}

Для активации меню, отображение или скрытие При переходе по списку навигации мы используем библиотеку jQuery. Вот событие нажатия кнопки, которая содержит верхнюю часть класса и функцию «toggleClass» jQuery, добавляя или удаляя класс «menu_show» из меню, делая его видимым или невидимым, следующим образом:

$(document).ready(function() {
    $("body").on('click', '.top', function() {
        $("nav.menu").toggleClass("menu_show");
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...