移动菜单设计如图片。不知道从哪里开始答案

【问题标题】：Moblie Menu Design like picture. No idea where to start移动菜单设计如图片。不知道从哪里开始
【发布时间】：2017-03-02 21:36:05
【问题描述】：

我看到了移动 menu.com 的一个很酷的设计

我什至不知道从哪里开始制作这样的东西。

http://weedmaps.com/

http://imgur.com/a/gyJ1H

【问题讨论】：

也许 OP 应该在链接到它之前提供一个警告，说明该网站包含成人内容...
有两个菜单。其中哪一个？

标签： javascript html css

【解决方案1】：

使用ul 列出您的菜单，而不是在标签旁边添加一些图标。

ul {
  padding: 0;
  background-color: blue;
}

li {
  color: white;
  display: block;
}

li:hover {
  background-color: rgba(250, 250, 250, .3);
}

li span {
  margin-right: 50px;
}

li a {
  color: inherit;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li><a href="#"><span class="fa fa-home fa-fw"></span>Home</a></li>
  <li><a href="#"><span class="fa fa-bookmark fa-fw"></span>Deals</a></li>
  <li><a href="#"><span class="fa fa-car fa-fw"></span>Deliveries</a></li>
</ul>

【讨论】：

【解决方案2】：

我已经创建了您的导航链接并将它们放在网页后面。使用 JQuery，我们左右移动页面以显示导航。然后反转它以关闭它。希望对您有所帮助！

$("a#menuOff").hide(0);

$( "a#menuOn" ).click(function() {
	var tog = "10%" 
	 $(".page").animate({left: tog});	 
	 $(".page").animate({top: tog});
	 $("a#menuOn").hide();	 
	 $("a#menuOff").show();
	 $(".page").css("width","90%");
});

$( "a#menuOff" ).click(function() {
	var tog = "0%" 
	 $(".page").animate({left: tog}); 
	 $(".page").animate({top: tog});
	 $("a#menuOff").hide();	 
	 $("a#menuOn").show();
	 $(".page").css("width","100%");
});

* {
  padding:0;
  margin:0;
}
#navbar {
	height:100vh;
	color:#fff;
	background:#212121;
}
.page {
	width:100%;
	position: absolute;
	z-index:1000;
	top:0;
	margin-left:0;
	font-family:Arial;
}
#reveal {
/* 	width:90%!important;
	margin-left:10%!important; */
}
.page nav {
	box-sizing:border-box;
	padding:0 1em;
	line-height:1.5em;
	background:#ccc;
}
.page nav a {
	color:red;
}
.page h1 {
	text-align:center;
	background:#fafafa;
	line-height:2em;
	border-bottom:2px solid #eee;
	font-size:1.8em;
}
.page p {
	box-sizing:border-box;
	background:#fafafa;
	padding:1em;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<ul id="navbar">
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
		<li><a href="#">Home</a></li>
	</ul>
	
	<div class="page" id="reveal">
		<header>
			<nav>
				<a href="#" id="menuOn">Menu</a>										<a href="#" id="menuOff">Menu</a>

			</nav>
			<h1>Your Title</h1>
		</header>
		<article>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sit dolores accusamus corporis fugiat error soluta! Et consectetur vel deleniti enim repellendus, eveniet veniam, voluptatem unde iure, debitis corporis praesentium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates, ab dignissimos eum porro laborum deleniti temporibus sed corrupti dolor voluptatem molestiae possimus quis, tenetur adipisci animi labore fuga mollitia.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit quibusdam laboriosam impedit, velit laudantium eligendi deleniti! In, molestiae aliquid expedita explicabo minima tenetur quod, totam dolores nesciunt, dignissimos debitis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nesciunt nostrum dolor modi! Ipsum culpa ab temporibus qui, modi tenetur, vitae, maiores ipsam doloribus reprehenderit ducimus aspernatur minima officiis iure.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sit dolores accusamus corporis fugiat error soluta! Et consectetur vel deleniti enim repellendus, eveniet veniam, voluptatem unde iure, debitis corporis praesentium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates, ab dignissimos eum porro laborum deleniti temporibus sed corrupti dolor voluptatem molestiae possimus quis, tenetur adipisci animi labore fuga mollitia.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit quibusdam laboriosam impedit, velit laudantium eligendi deleniti! In, molestiae aliquid expedita explicabo minima tenetur quod, totam dolores nesciunt, dignissimos debitis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nesciunt nostrum dolor modi! Ipsum culpa ab temporibus qui, modi tenetur, vitae, maiores ipsam doloribus reprehenderit ducimus aspernatur minima officiis iure.</p>
		</article>
	</div>
</div>

【讨论】：

【解决方案3】：

您可以为此使用ionic。

Ionic 有 cli 支持，它会自动创建一个带有菜单的模板。之后，您可以随意自定义。 Ionic cli 命令是：

ionic start yourAppName sidemenu

【讨论】：