努力创建我的导航的移动版本 [英] Struggling to Create Mobile Version of my Navigation

问题描述

所以我正在建立一个投资组合网站，我刚刚完成主导航 - 但我很努力得到一个工作的移动版本的，我的所有尝试都不能正常工作...

So I'm building a portfolio site and I've just completed the main navigation - but I'm struggling to get a working mobile version of it, all my attempts have not worked correctly...

基本上我想创建它，以便在手机上查看时，只有单词菜单在页面的顶部，当您单击菜单导航打开

Basically I'm trying to create it so that when it is viewed on a phone there is just the word MENU at the top of the page and when you click on the word MENU the navigation opens up in a drop-down.

任何人都可以给我一些指导，如何在手机版本上实现这种效果？我会把我现在的代码以及一个JSFiddle。

Could anyone maybe give me some guidance as to how to achieve this effect on the mobile version? I'll put my current code below as well as a 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/

任何帮助将非常感激！

推荐答案

您可以考虑包装你的cssmenu如下：

You may consider wrapping your 'cssmenu' like this:

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

隐藏#menu，然后开始显示所需的动画！

Hide the "#menu", and then work on having desired animation to display it!

这是一个正常的演示

这篇关于努力创建我的导航的移动版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！