Как сделать свое текущее CSS-раскрывающееся меню Отзывчивым и мобильным?

Question

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

Я надеюсь, что кто-то может показать мне точный код, который мне нужно добавить к нему с правильными именами классов и т. Д. Я уже пробовал и проваливал на этом, пытаясь адаптировать ответы других народов. Я знаю, что есть различные места, которые будут «строить» один бесплатно и дать мне код, однако я хочу, чтобы версия моего меню на настольном компьютере была на 100% одинаковой, мне просто нужно, чтобы она правильно масштабировалась на меньшие экраны.

Я также не хочу использовать JQuery Javascript или что-нибудь еще, что не HTML5 или CSS3, код вставляется в мой index.php и CSS в мой внешний файл CSS,

С моей индексной страницы:

 <!-- NAV-BAR-START --> 

    <div id="navbar"><div id='cssmenu'> 
    <ul> 
     <li><a href='/?p=home'><span>Home</span></a></li> 
    <li class='has-sub'><a href='/?p=gallery'><span>Gallery</span></a> 
    <ul> 
    <li><a href='/?p=photos'><span>Photos</span></a></li> 
    <li><a href='/?p=videos'><span>Videos</span></a></li> 
    <li><a href='/?p=audio'><span>Audio</span></a></li> 
    </ul> 
</li> 
<li class='has-sub'><a href='/?p=ian-milne'><span>Ian Milne</span></a> 
    <ul> 
     <li><a href='/?p=about'><span>About Ian</span></a></li> 
     <li><a href='/?p=testimonials'><span>Testimonials</span></a></li> 
    <li class='last'><a href='/?p=location'><span>Location</span></a></li> 
    </ul> 
</li> 
    <li><a href='/?p=events'><span>Events</span></a></li> 
    <li><a href='/?p=bookings'><span>Bookings</span></a></li> 
<li class='last'><a href='/?p=contact'><span>Contact</span></a></li> 
< /ul> 
</div></div> 

    <!-- NAV-BAR-END --> 

И ассоциированная CSS:

/* CSS DROPDOWN MENU */ 

#cssmenu { 
    border: none; 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    width: auto; 
    text-align:center; 

} 
#cssmenu ul { 
    background: #000dfa; 
    height: 50px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    -webkit-border-radius: 8px 8px 0px 0px; 
    -moz-border-radius: 8px 8px 0px 0px; 
    border-radius: 8px 8px 0px 0px; 
    -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
    -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
    box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, 0.1); 
} 
#cssmenu li { 
    float: none; 
    padding: 0px 0px 0px 15px; 
    display: inline-block; 
} 
#cssmenu li a { 
    color: #ffffff; 
    display: block; 
    font-weight: normal; 
    line-height: 50px; 
    margin: 0px; 
    padding: 0px 25px; 
    text-align: center; 
    text-decoration: none; 
} 
#cssmenu li a:hover { 
    background: #000894; 
    color: #ff8400; 
    text-decoration: none; 
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
    box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
} 
#cssmenu ul li:hover a { 
    background: #000894; 
    color: #ff8400; 
    text-decoration: none; 
} 
#cssmenu li ul { 
    display: none; 
    height: auto; 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    position: absolute; 
    width: 200px; 
    z-index: 200; 
} 
#cssmenu li:hover ul { 
    display: block; 
} 
#cssmenu li li { 
    display: block; 
    float: none; 
    margin: 0px; 
    padding: 0px; 
    width: 200px; 
    background: #000dfa; 
    /*this is where the rounded corners for the dropdown disappears*/ 

} 
#cssmenu li:hover li a { 
    background: none; 
} 
#cssmenu li ul a { 
    display: block; 
    height: 50px; 
    font-size: 12px; 
    font-style: normal; 
    margin: 0px; 
    padding: 0px 10px 0px 15px; 
    text-align: left; 
} 
#cssmenu li ul a:hover, 
#cssmenu li ul li:hover a { 
    border: 0px; 
    color: #ff8400; 
    text-decoration: none; 
    background: #000894; 
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
    box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3); 
} 

Я ставлю это в jsfiddle Aswell для тех, кто спрашивали

http://jsfiddle.net/GregTimeassistant/WLP8h/

Answer 1

Вы можете использовать стиль для каждого запроса на мультимедиа. Просто скопируйте/вставьте все свои стили для каждого случая. Вы можете изменить размер окна браузера, чтобы вы могли видеть результат для каждого запроса на медиа. Просто экспериментируйте много, вы увидите, что легко настроить свой дизайн для каждого соотношения сторон.

@media (max-width: 600px) { 
#cssmenu { 
    /* 
    copy styles here 
    */ 
} 
} 

Проверить этот пример, который охватывает множество устройств (но нуждается в некотором обновлении для новых смартфонов и планшетов HD). https://gist.github.com/marcobarbosa/798569