Борьба за создание мобильной версии моей навигации

Question

Итак, я создаю портфолио, и я только что завершил основную навигацию, но я изо всех сил пытаюсь получить рабочую мобильную версию, все мои попытки не сработали правильно ...

В основном я пытаюсь создать его так, чтобы при просмотре на телефоне в верхней части страницы было только слово МЕНЮ, и когда вы нажимаете на слово МЕНЮ, навигация открывается в падать.

Может ли кто-нибудь, может быть, дать мне некоторое представление о том, как добиться этого эффекта на мобильной версии? Я поставлю свой текущий код ниже, а также JSFiddle.

HTML:

<div id='cssmenu'> 
<ul> 
    <li><a href='index.html'>HOME</a></li> 
    <li class='has-sub'><a href='#'>TWENTY FIFTEEN</a> 
     <ul> 
      <li><a href='painting-2015.html'>PAINTING</a></li> 
      <li><a href='#'>SCULPTURE</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>ABOUT</a></li> 
    <li><a href='#'>CONTACT</a></li> 
</ul> 
</div> 

CSS:

#cssmenu { 
float: left; 
clear: left; 
} 

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
margin: 0; 
padding: 0; 
border: 0; 
list-style: none; 
line-height: 1; 
display: block; 
position: relative; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 

#cssmenu { 
width: 220px; 
font-family: Open Sans, sans-serif; 
color: #000; 
} 

#cssmenu ul ul { 
display: none; 
} 

#cssmenu > ul > li.active > ul { 
display: block; 
} 

.align-right { 
float: right; 
} 

#cssmenu > ul > li > a { 
padding: 16px 22px; 
cursor: pointer; 
z-index: 2; 
font-size: 12px; 
text-decoration: none; 
color: #000; 
background: #fff; 
-webkit-transition: color .2s ease; 
-o-transition: color .2s ease; 
transition: color .2s ease; 
} 

#cssmenu > ul > li > a:hover { 
color: #ccc; 
} 

#cssmenu ul > li.has-sub > a:after { 
position: absolute; 
right: 26px; 
top: 19px; 
z-index: 5; 
display: block; 
height: 10px; 
width: 2px; 
background: #000; 
content: ""; 
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-ms-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out; 
} 

#cssmenu ul > li.has-sub > a:before { 
position: absolute; 
right: 22px; 
top: 23px; 
display: block; 
width: 10px; 
height: 2px; 
background: #000; 
content: ""; 
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-ms-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out; 
} 

#cssmenu ul > li.has-sub.open > a:after, 
#cssmenu ul > li.has-sub.open > a:before { 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
} 

#cssmenu ul ul li a { 
padding: 14px 22px; 
cursor: pointer; 
z-index: 2; 
font-size: 12px; 
text-decoration: none; 
color: #000; 
background: #fff; 
-webkit-transition: color .2s ease; 
-o-transition: color .2s ease; 
transition: color .2s ease; 
} 

#cssmenu ul ul ul li a { 
padding-left: 32px; 
} 

#cssmenu ul ul li a:hover { 
color: #ccc; 
} 

#cssmenu ul ul > li.has-sub > a:after { 
top: 16px; 
right: 26px; 
background: #000; 
} 

#cssmenu ul ul > li.has-sub > a:before { 
top: 20px; 
background: #000; 
} 

И скрипка - http://jsfiddle.net/7fshu82L/

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете рассмотреть оборачивать ваш «cssmenu», как это:

<div id="menu"> 
    <div id="cssmenu"> 
//your code 
</div> 

Скрыть «#menu», а затем работать на том нужную анимацию, чтобы отобразить его!

Вот рабочий demo