how to change label into dropdown when size reduce?

Question!

enter image description here hello I am trying to change the layout of my screen when my large screen move to small screen .When I have large screen I show my menu option on header as a label .which i am able to make .But when I reduce the screen size to 600px width I need to show this on dropdown the menu options

how will I do this ? I search on google and find using media query it is possible .I try to implement this . but I got event but how it is possible

here is my code and images

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

enter image description here

    #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;
}


Answers

Just throwing my two cents. The answer from @Schlaus is preferred way to do it and the way I would also do it. Here is a code pen I found of a way to do it without having to code the menu twice in the markup - it's a good reference for those that are curious for other alternative ways of getting it done using JQuery.

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


HTML



You'll just need media queries to hide the menu you don't want to show. Here's a simple example: (resize browser window to test)

.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;
    }
}
By : Schlaus


This video can help you solving your question :)
By: admin