Facebook like menu (responsive) Without a doubt, the responsive technology is becoming more and more popular. This allows us to save time when we develop design intended for use on a variety of devices: from mobile devices to widescreen computers. There is no need to develop a special version of the site for each format (devices). Today we will create a new responsive menu that looks like facebook menu. To create this menu, we do not need javascript, everything is implemented using only CSS3 (for IE7-IE10, Firefox, Opera, Safari, Chrome and iPad/iPod/iPhone).
Facebook像菜单(响应式)一样毫无疑问，响应式技术正变得越来越流行。 这使我们可以节省开发用于各种设备的设计所需的时间：从移动设备到宽屏计算机。 无需为每种格式(设备)开发站点的特殊版本。 今天，我们将创建一个类似于Facebook菜单的新的响应式菜单。 要创建此菜单，我们不需要javascript，所有内容都仅使用CSS3(适用于IE7-IE10，Firefox，Opera，Safari，Chrome和iPad / iPod / iPhone)实现。
For today’s lesson, we have prepared two demonstrations (different responsive results). For the first menu, it turns into a selector, for the second one it turns into a vertical menu (you can use your touchscreen to open submenus):
对于今天的课程，我们准备了两个演示(不同的响应结果)。 对于第一个菜单，它变成一个选择器，对于第二个菜单，它变成一个垂直菜单(您可以使用触摸屏打开子菜单)：
现场演示1
现场演示2
步骤1. HTML (Step 1. HTML)
The base of the menu – the usual UL-LI based menu:
菜单的基础–基于UL-LI的常规菜单：
index.html (index.html)
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="subs"><a href="#s1">Menu 1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
<li><a href="#">Submenu D</a></li>
</ul>
</li>
<li class="subs"><a href="#s2">Menu 2</a>
<ul>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
<li><a href="#">Submenu G</a></li>
<li><a href="#">Submenu H</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li>
</ul>
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="subs"><a href="#s1">Menu 1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
<li><a href="#">Submenu D</a></li>
</ul>
</li>
<li class="subs"><a href="#s2">Menu 2</a>
<ul>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
<li><a href="#">Submenu G</a></li>
<li><a href="#">Submenu H</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li>
</ul>
Everything should be clear at this stage. To create the first version (with using the selector) we have to add this element (below the menu):
在此阶段，一切都应该清楚。 要创建第一个版本(使用选择器)，我们必须添加此元素(在菜单下方)：
<select id="nav_v2" onchange="window.location.href = this.options[this.selectedIndex].value">
<option selected="selected" value="">Choise Page...</option>
<option value="#">Submenu 1</option>
<option value="#">Submenu A</option>
<option value="#">Submenu B</option>
<option value="#">Submenu C</option>
<option value="#">Submenu D</option>
<option value="#">Submenu 2</option>
<option value="#">Submenu E</option>
<option value="#">Submenu F</option>
<option value="#">Submenu G</option>
<option value="#">Submenu H</option>
<option value="#">Submenu 3</option>
<option value="#">Submenu 4</option>
<option value="#">Submenu 5</option>
<option value="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</option>
</select>
<select id="nav_v2" onchange="window.location.href = this.options[this.selectedIndex].value">
<option selected="selected" value="">Choise Page...</option>
<option value="#">Submenu 1</option>
<option value="#">Submenu A</option>
<option value="#">Submenu B</option>
<option value="#">Submenu C</option>
<option value="#">Submenu D</option>
<option value="#">Submenu 2</option>
<option value="#">Submenu E</option>
<option value="#">Submenu F</option>
<option value="#">Submenu G</option>
<option value="#">Submenu H</option>
<option value="#">Submenu 3</option>
<option value="#">Submenu 4</option>
<option value="#">Submenu 5</option>
<option value="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</option>
</select>
By default, this selector is hidden. It is visible only for small devices (due its responsive rules)
默认情况下，此选择器是隐藏的。 仅对于小型设备可见(由于其响应规则)
步骤2. CSS (Step 2. CSS)
In this section we start decorating the navigation menu. First of all, we have to define general styles:
在本节中，我们开始装饰导航菜单。 首先，我们必须定义一般样式：
css / main.css (css/main.css)
* {
margin: 0;
padding: 0;
}
html {
background-color: #E9EAED;
height: 100%;
}
body {
color: #333333;
font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}
/* other elements */
#nav_v2 {
display: none;
}
* {
margin: 0;
padding: 0;
}
html {
background-color: #E9EAED;
height: 100%;
}
body {
color: #333333;
font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}
/* other elements */
#nav_v2 {
display: none;
}
Now, we can prepare styles for the top level elements:
现在，我们可以为顶级元素准备样式：
/* top level elements */
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: rgb(78,105,162);
background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
border-bottom: 1px solid #3A4B7B;
height: 22px;
padding: 10px 0 10px 5px;
position: relative;
}
#nav > li {
float: left;
height: 22px;
padding-right: 6px;
position: relative;
text-align: left;
}
#nav > li > a {
border: 1px solid transparent;
color: #FFFFFF;
display: block;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 27px;
margin: -3px 0 0 -1px;
padding: 0 1px 0 11px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
background-color: #425691;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
margin-right: -8px;
padding: 0 9px 0 11px;
position: relative;
z-index: 1;
}
#nav > li.subs:hover > a {
background-color: #FFFFFF;
border: 1px solid rgba(100, 100, 100, 0.4);
border-bottom-width: 0;
border-radius: 2px 2px 0 0;
color: #000000;
text-shadow: 0 0 transparent;
z-index: 2;
}
/* top level elements */
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: rgb(78,105,162);
background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
border-bottom: 1px solid #3A4B7B;
height: 22px;
padding: 10px 0 10px 5px;
position: relative;
}
#nav > li {
float: left;
height: 22px;
padding-right: 6px;
position: relative;
text-align: left;
}
#nav > li > a {
border: 1px solid transparent;
color: #FFFFFF;
display: block;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 27px;
margin: -3px 0 0 -1px;
padding: 0 1px 0 11px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
background-color: #425691;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
margin-right: -8px;
padding: 0 9px 0 11px;
position: relative;
z-index: 1;
}
#nav > li.subs:hover > a {
background-color: #FFFFFF;
border: 1px solid rgba(100, 100, 100, 0.4);
border-bottom-width: 0;
border-radius: 2px 2px 0 0;
color: #000000;
text-shadow: 0 0 transparent;
z-index: 2;
}
The menu has blue gradient line, all the elements are float:left aligned (horizontally side by side). Next element is a separator between menu elements:
菜单具有蓝色渐变线，所有元素均为float：左对齐(水平并排)。 下一个元素是菜单元素之间的分隔符：
/* top items separator */
#nav > li:after {
background-color: #405791;
content: "";
height: 17px;
left: 1px;
position: absolute;
top: 2px;
width: 1px;
}
#nav > li:first-child:after {
background-color: transparent;
}
/* top items separator */
#nav > li:after {
background-color: #405791;
content: "";
height: 17px;
left: 1px;
position: absolute;
top: 2px;
width: 1px;
}
#nav > li:first-child:after {
background-color: transparent;
}
To complete the menu, we need to add styles for the submenu (drop down):
要完成菜单，我们需要为子菜单添加样式(下拉菜单)：
/* submenu */
#nav ul {
background-color: #FFFFFF;
border: 1px solid rgba(100, 100, 100, 0.4);
*border: 1px solid rgb(100, 100, 100);
border-radius: 0 0 3px 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
display: none;
left: -1px;
margin-top: 2px;
min-width: 200px;
padding: 6px 0;
position: absolute;
top: 100%;
z-index: 1;
}
#nav li:hover ul {
display: block;
}
#nav ul li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #232B37;
display: block;
font-size: 12px;
line-height: 20px;
padding: 0 22px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
#nav ul li a:hover {
background-color: #6D84B4;
border-bottom: 1px solid #3B5998;
border-top: 1px solid #3B5998;
color: #FFFFFF;
}
/* submenu */
#nav ul {
background-color: #FFFFFF;
border: 1px solid rgba(100, 100, 100, 0.4);
*border: 1px solid rgb(100, 100, 100);
border-radius: 0 0 3px 3px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
display: none;
left: -1px;
margin-top: 2px;
min-width: 200px;
padding: 6px 0;
position: absolute;
top: 100%;
z-index: 1;
}
#nav li:hover ul {
display: block;
}
#nav ul li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #232B37;
display: block;
font-size: 12px;
line-height: 20px;
padding: 0 22px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
#nav ul li a:hover {
background-color: #6D84B4;
border-bottom: 1px solid #3B5998;
border-top: 1px solid #3B5998;
color: #FFFFFF;
}
That’s it. The menu is ready, and we are ready to start adding responsive styles (using media queries). The CSS3 media queries are used to define how the styles will shift in some certain breakpoints(or specifically the device screen sizes). As you remember, for the first demo we prepared the selector, let’s customize its styles:
而已。 菜单已准备就绪，我们准备开始添加响应式样式(使用媒体查询)。 CSS3媒体查询用于定义样式在某些断点(或设备屏幕尺寸)上如何变化。 您还记得，在第一个演示中，我们准备了选择器，让我们自定义其样式：
/* responsive rules */
@media all and (max-width : 980px) {
#nav {
display: none;
}
#nav_v2 {
background-color: rgb(78,105,162);
border: 1px solid #3A4B7B;
color: #FFFFFF;
cursor: pointer;
display: block;
margin-bottom: 30px;
padding: 6px;
width: 100%;
}
#nav_v2 select {
color: #FFFFFF;
cursor: pointer;
}
}
/* responsive rules */
@media all and (max-width : 980px) {
#nav {
display: none;
}
#nav_v2 {
background-color: rgb(78,105,162);
border: 1px solid #3A4B7B;
color: #FFFFFF;
cursor: pointer;
display: block;
margin-bottom: 30px;
padding: 6px;
width: 100%;
}
#nav_v2 select {
color: #FFFFFF;
cursor: pointer;
}
}
The first menu is finally ready, it has received its responsive styles.
第一个菜单终于准备好了，它已经收到了响应式的样式。
版本2 –垂直菜单 (Version 2 – Vertical menu)
In order to give an opportunity to use a touchpad to handle with menu we can use an easy trick – using :target pseudo element. First of all, we have to modify our HTML layout (add few hidden span elements):
为了给使用触摸板处理菜单的机会，我们可以使用一个简单的技巧–使用：target伪元素。 首先，我们必须修改我们HTML布局(添加一些隐藏的span元素)：
index2.html (index2.html)
<ul id="nav">
<li><a href="#">Home</a></li>
<span id="s1"></span>
<li class="subs"><a href="#s1">Menu 1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
<li><a href="#">Submenu D</a></li>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
</ul>
</li>
<span id="s2"></span>
<li class="subs"><a href="#s2">Menu 2</a>
<ul>
<li><a href="#">Submenu G</a></li>
<li><a href="#">Submenu H</a></li>
<li><a href="#">Submenu I</a></li>
<li><a href="#">Submenu J</a></li>
<li><a href="#">Submenu K</a></li>
<li><a href="#">Submenu L</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li>
</ul>
<ul id="nav">
<li><a href="#">Home</a></li>
<span id="s1"></span>
<li class="subs"><a href="#s1">Menu 1</a>
<ul>
<li><a href="#">Submenu A</a></li>
<li><a href="#">Submenu B</a></li>
<li><a href="#">Submenu C</a></li>
<li><a href="#">Submenu D</a></li>
<li><a href="#">Submenu E</a></li>
<li><a href="#">Submenu F</a></li>
</ul>
</li>
<span id="s2"></span>
<li class="subs"><a href="#s2">Menu 2</a>
<ul>
<li><a href="#">Submenu G</a></li>
<li><a href="#">Submenu H</a></li>
<li><a href="#">Submenu I</a></li>
<li><a href="#">Submenu J</a></li>
<li><a href="#">Submenu K</a></li>
<li><a href="#">Submenu L</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="https://www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li>
</ul>
The logic of a click-action is described in the following styles:
单击动作的逻辑以以下样式描述：
/* other elements */
#nav span {
display: none;
}
/* responsive rules */
@media all and (max-width : 980px) {
/* top level elements */
#nav {
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#nav li {
display: inline;
float: left;
height: auto;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
#nav > li:after {
display: none;
}
#nav > li > a {
border-bottom: 1px solid #3B5998;
height: 40px;
line-height: 40px;
margin: 0;
}
#nav > li:hover > a, #nav > a:hover {
margin: 0;
border-width: 1px;
}
#nav > li.subs:hover > a {
border-radius: 0;
border-width: 1px;
}
/* submenu */
#nav ul {
border: 0;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: 0;
}
#nav li:hover ul {
display: none;
}
#nav ul li a {
height: 40px;
line-height: 40px;
}
#nav #s1:target + li > a,
#nav #s2:target + li > a{
background-color: #FFFFFF;
border: 0;
color: #000000;
text-shadow: 0 0 transparent;
}
#nav #s1:target + li ul,
#nav #s2:target + li ul {
display: block;
}
}
/* other elements */
#nav span {
display: none;
}
/* responsive rules */
@media all and (max-width : 980px) {
/* top level elements */
#nav {
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#nav li {
display: inline;
float: left;
height: auto;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
#nav > li:after {
display: none;
}
#nav > li > a {
border-bottom: 1px solid #3B5998;
height: 40px;
line-height: 40px;
margin: 0;
}
#nav > li:hover > a, #nav > a:hover {
margin: 0;
border-width: 1px;
}
#nav > li.subs:hover > a {
border-radius: 0;
border-width: 1px;
}
/* submenu */
#nav ul {
border: 0;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: 0;
}
#nav li:hover ul {
display: none;
}
#nav ul li a {
height: 40px;
line-height: 40px;
}
#nav #s1:target + li > a,
#nav #s2:target + li > a{
background-color: #FFFFFF;
border: 0;
color: #000000;
text-shadow: 0 0 transparent;
}
#nav #s1:target + li ul,
#nav #s2:target + li ul {
display: block;
}
}
It means, than when our screen is small enough, it converts the menu into the vertical menu, with possibility to open submenus by clicking on its parents.
这意味着，当我们的屏幕足够小时，它将菜单转换为垂直菜单，并有可能通过单击其父菜单来打开子菜单。
The second menu is finally ready too.
第二个菜单也终于准备好了。
现场演示1
现场演示2
[sociallocker]
[社交储物柜]
下载资源
[/sociallocker]
[/ sociallocker]
结论 (Conclusion)
We have just created two different (by logic) responsive menus that look like facebook menu (the same blue colors and styles). I’m sure that it will be very useful for you. Good luck and welcome back
我们刚刚创建了两个不同的(按逻辑)响应菜单，它们看起来像Facebook菜单(相同的蓝色和样式)。 我相信它将对您非常有用。 祝你好运，欢迎回来
翻译自: https://www.script-tutorials.com/facebook-like-menu-responsive/
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
