Как изменить ярлык в выпадающем списке при уменьшении размера?

Question

hello Я пытаюсь изменить макет экрана, когда мой большой экран перемещается на маленький экран. Когда у меня есть большой экран, я показываю свой пункт меню на заголовке как ярлык, который я могу сделать. Но когда Я уменьшаю размер экрана до ширины 600 пикселей. Мне нужно показать это при выпадающем меню.

как я это сделаю? Я ищу в google и поиск с помощью медиа-запроса возможно. Я пытаюсь реализовать это. но я получил событие, но как можно

вот мой код и изображения

http://codepen.io/anon/pen/LpGKYO

#menubar li { 
     display: inline; 
     padding:0.5em; 
     font-size:1.5em; 
     color :red 
    } 
    @media screen and (max-width: 600px) { 
     body { 
      background-color: lightblue; 
     } 
    } 
#menubar{ 
    float:right; 
    display: block; 
    position:relative; 
} 

#menubarCont { 
    width: 100%; 
    float: right ; 
    right:10em; 
    position:relative; 
} 

Answer 1

Вам просто нужно медиазапросы, чтобы скрыть меню вы надеваете» я хочу показать. Вот простой пример: (размер окна браузера для тестирования)

.menu { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: orange; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .large { 
 
     display: none; 
 
    } 
 
} 
 

 
@media screen and (min-width: 600px) { 
 
    .small { 
 
     display: none; 
 
    } 
 
}

<div class="menu"> 
 
    <div class="large"> 
 
     Large screen menu 
 
    </div> 
 
    <div class="small"> 
 
     <select> 
 
     <option>menu item 1</option> 
 
     <option>menu item 2</option> 
 
     </select> 
 
    </div> 
 
</div>

And here's a Fiddle too

Answer 2

Просто бросать мои два цента. Ответ от @Schlaus - это предпочтительный способ сделать это и способ, которым я тоже это сделаю. Вот ручка кода, которую я нашел, способ сделать это, не заставляя дважды программировать меню в разметке - это хорошая ссылка для тех, кому интересно другие альтернативные способы сделать это с помощью JQuery.

http://codepen.io/ericrasch/pen/GlBed

---

HTML

<nav> 

    <h1>This menu turns into a <code>&lt;select&gt;</code> when window is less than 960px to conserve space.</h1> 

    <ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#books">Books</a></li> 
    <li><a href="#blog">Blog</a></li> 
    <li><a href="#about">About Us</a></li> 
    <li><a href="#support">Support</a></li> 
    </ul> 

</nav> 

---

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

h1 { 
    font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    width: 500px; 
    margin: 0 auto 15px; 
} 

nav { 
    display: block; 
    width: 960px; 
    margin: 100px auto; 
    text-align: center; 
    ul { 
    list-style: none; 
    } 
    li { 
    display: inline-block; 
    } 
    a { 
    display: inline-block; 
    background: #333; 
    color: white; 
    padding: 5px 15px; 
    border: 1px solid white; 
    text-decoration: none; 
    &:hover { 
     border: 1px solid red; 
     background: red; 
    } 
    &:active { 
     background: blue; 
    } 
    } 
    select { 
    display: none; 
    } 
} 

@media (max-width: 960px) { 
    nav { 
    ul { 
     display: none; 
    } 
    select { 
     display: inline-block; 
    } 
    } 
} 

---

JQuery

// DOM ready 
$(function() { 

    // Create the dropdown base 
    $("<select />").appendTo("nav"); 

    // Create default option "Go to..." 
    $("<option />", { 
    "selected": "selected", 
    "value" : "", 
    "text" : "Go to..." 
    }).appendTo("nav select"); 

    // Populate dropdown with menu items 
    $("nav a").each(function() { 
    var el = $(this); 
    $("<option />", { 
     "value" : el.attr("href"), 
     "text" : el.text() 
    }).appendTo("nav select"); 
    }); 

    // To make dropdown actually work 
    // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/ 
    $("nav select").change(function() { 
    window.location = $(this).find("option:selected").val(); 
    }); 

}); 

---

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

Приветствиях