Как исправить меню, которые не ведут себя при использовании CSS3 Media Queries? - PullRequest
Новая
       6

Как исправить меню, которые не ведут себя при использовании CSS3 Media Queries?

0 голосов
/ 24 января 2019

Я учусь создавать адаптивные веб-сайты для настольных компьютеров, планшетов и мобильных устройств с помощью медиазапросов CSS3. Я создал вымышленный сайт для практики, но у меня проблемы с иконкой меню и горизонтальным меню. В представлении рабочего стола меню должно быть горизонтальным и перемещаться вправо, но вместо этого оно вертикальное. Когда я уменьшаю экран до размеров мобильного телефона, появляется значок меню и горизонтальное меню. Я хочу, чтобы значок меню отображался на мобильном экране, но меню не опускалось. Может кто-нибудь сказать, пожалуйста, что я делаю не так? Спасибо.

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=UTF-8">
    <title>Abstract Alibi Agency</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>Abstract Alibi Agency</h1>
            <nav>
                <a href="#" id="menu-icon"></a>

                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section class="hero">
            <div class="container">
                <h2>We'll catch them in the act.</h2>
            </div>
        </section>

        <section class="main">
            <aside>
                <h3>Background Checks</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>

        <section>
            <aside>
                <h3>Investigate Infidilty</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>

        <section>
            <aside>
                <h3>Security</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>
        <footer>&copy; Abstract Alibi Agency 2018 - All Rights Reserved.</footer>
    </div>
</body>
</html>

CSS: 

body {
    font-family: 'Times New Roman', sans-serif;
    font-size: 1em;
    color: #000;
    margin: 0;
    padding: 0;
    background-color: #999;
}

#container {
    width: 100%;
    margin: 0 auto;
    position: absolute;
}

header {
    padding: 5px;
    background: #000;
    width: 100%;
    height: 76px;
    position: fixed;
}

h1 {
    margin-left: 10px;
    color: #00F;
    font-size: 1.5rem;
    display: inline-block;
}

h3 {
    color: #00F;
    text-align: center;
}

nav {
    float: right;
    padding: 5px;
    font-family: 'Georgia', sans-serif;
}

#menu-icon {
    background: url(../img/menu-icon.png);
    display: hidden;
    width: 50px;
    height: 42px;
    float: right;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    float: left;
    padding: 10px;
}

a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

    a:hover {
        text-decoration: underline;
    }

.hero {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: url(../img/couple.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: #000 2px solid;
    z-index: -1;
}

    .hero h2 {
        width: 100%;
        padding: 80px;
        color: #FFF;
        text-align: center;
    }

section .main aside {
    max-width: 425px;
    text-align: left;
}

aside {
    width: 100%;
    float: none;
}

p {
    margin: 35px;
}

footer {
    width: 100%;
    margin-top: 0;
    padding: 15px;
    background-color: #000;
    color: #999;
    text-align: center;
}

@media (min-width: 640px) { /* targets screens 640px and up */
    h3 {
        margin: 30px;
        color: #00F;
        text-align: left;
    }

    header {
        position: relative;
    }

    nav {
        float: right;
        padding: 5px;
        font-family: 'Georgia', sans-serif;
    }

    #menu-icon {
        display: none;
    }

    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        float: left;
        padding: 10px;
    }

    a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

        a:hover {
            text-decoration: underline;
        }

    nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 10%;
    }

    nav:hover ul {
        display: block;
    }

    nav li {
        text-align: center;
        width: 100%;
        padding: 15px 0;
        margin: 0;
    }

    section .main aside {
        text-align: left;
    }

    aside {
        width: 33.3%;
        float: left;
    }

    footer {
        margin-top: 0;
        padding: 15px;
        background-color: #000;
        color: #999;
        text-align: center;
        clear: both;
    }
}

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

1 Ответ

0 голосов
/ 26 января 2019

установить nav ul ширину 25% и удалить nav li ширину и добавить последнюю строку текущей ширины @media (max-width: 640px) { nav ul{ width:10%; } nav li{ width:100%} } как это 

@media (min-width: 640px) {
    nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 25%;/* set to little more because Items can fit in horizontal */
    }

    nav li {
        text-align: center;
        /*width: 100%; remove li width than its should set auto 100% means 100% of parent(ul) and this makes a row(in block view)*/
        padding: 15px 15px;/*some padding for visibility*/
        margin: 0;
    }
}
@media (min-width: 640px) { 
        nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 10%;/*back to the you first width*/
    }

    nav li {
        text-align: center;
        width: 100%;/*open width for row to row view*/
        padding: 15px 0px;/*remove padding to normal*/
        margin: 0;
    }
}

мобильная версия, чтобы показать значок меню и раскрыть его, когда щелкнул

Ширина некоторых JQuery 

$('.menu-icon').click(function () {
    $("nav").toggleClass("nav-hidden-mobile");
});

и в вашем html <nav> до <nav class="nav-hidden-mobile">

и класс css @media (max-width: 640px) { .nav-hidden-mobile{ display:none; } }

должно работать, не пробовал это, но пытался верхний css ( перед тем, как написать первый комментарий ), его работа

...