Измените мой навигатор с помощью браузера

Question

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

Вот мой HTML.

<ul class="mobilemenu"> 
        <li><a href="http://workbyjimmi.se/construction.html">ABOUT ME</a></li> 
        <li><a href="http://workbyjimmi.se/construction.html">PORTFOLIO</a></li> 
        <li><a href="http://workbyjimmi.se/construction.html">PROJECTS</a></li> 
        <li><a href="http://workbyjimmi.se/construction.html">CONTACT</a></li> 
       </ul> 

А вот мой CSS.

.mobilemenu 
{ 
    display: block; 
    list-style: none; 
    position: relative; 
    width: 100%; 
    margin: auto; 
    text-shadow: 0px 0px 10px #000; 
    filter: dropshadow(color=#000, offx=0, offy=0); 

} 

.mobilemenu li 
{ 
    display: block; 
    line-height: 40px; 
    margin-top: 2%; 
    width: 40%; 
    text-align: center; 
    background-color: rgba(135,6,29,0.8); 
    letter-spacing: 3px; 
} 

Вы также можете пойти проверить мою страницу и масштабировать его вниз пока вы видите другой навигатор.

www.workbyjimmi.se

Answer 1

Вы должны использовать медиа-запросы. Вы можете найти больше о них здесь: http://css-tricks.com/css-media-queries/

* Возможно, я пропустил понимание того, что вы пытаетесь сделать. Но даже если мой пример неверен, вы можете использовать медиа-запросы, чтобы помочь настроить различные устройства. Вы можете настроить медиа-запросы на конкретные размеры экрана, чтобы внести необходимые изменения в навигацию. В Google есть тон информации, если вы хотите узнать больше об этом.

Я также сделал это из вашего кода, попробуйте изменить размер окна предварительного просмотра, чтобы увидеть, как изменяется меню. http://jsfiddle.net/2mDxa/3/

HTML

<ul class="mobilemenu"> 
    <li><a href="http://workbyjimmi.se/construction.html">ABOUT ME</a></li> 
    <li><a href="http://workbyjimmi.se/construction.html">PORTFOLIO</a></li> 
    <li><a href="http://workbyjimmi.se/construction.html">PROJECTS</a></li> 
    <li><a href="http://workbyjimmi.se/construction.html">CONTACT</a></li> 
</ul> 

CSS

body{ margin: 0; } 
.group:before, 
.group:after, 
.mobilemenu:before, 
.mobilemenu:after{ 
    content: ""; 
    display: table; 
} 
.group:after, .mobilemenu:after { 
    clear: both; 
} 
.group, .mobilemenu { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
} 
.mobilemenu 
{ 
    display: block; 
    list-style: none; 
    position: relative; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    text-shadow: 0px 0px 10px #000; 
    filter: dropshadow(color=#000, offx=0, offy=0); 
} 

.mobilemenu li{ 
    display: block; 
    line-height: 40px; 
    margin-top: 0; 
    width: 25%; 
    float: left; 
    text-align: center; 
    background-color: rgba(135,6,29,0.8); 
    letter-spacing: 3px; 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (max-width : 1224px) { 
/* Styles */ 
.mobilemenu li{ 
    width: 100%; 
    float: none; 
    }  
} 

После ваших комментариев, вы имеете в виду масштаб, как это ?: http://jsfiddle.net/2mDxa/4/