奥曼·克拉克（Orman Clark）编码的PSD系列中的下一个是他超酷的“ 垂直导航菜单” 。 我们将使用CSS3和jQuery重新创建它，同时使用尽可能少的图像。
我们将使用的唯一图像是用于图标的图像-我将使用名为SpriteRight的新工具创建一个sprite，但这是可选的。 另外，我将使用GradientApp创建我CSS3渐变，但这也是可选的。
步骤1：基本HTML标记
让我们从抛出一些基本标记（一个空HTML5文档）开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertical Navigation Menu: CSS3 Coded</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
</body>
</html>现在，我们菜单的标记； 包含包装器中的无序列表。
<div id="wrapper">
<ul class="menu">
<li class="item1"><a href="#">Friends <span>340</span></a></li>
<li class="item2"><a href="#">Videos <span>147</span></a></li>
<li class="item3"><a href="#">Galleries <span>340</span></a></li>
<li class="item4"><a href="#">Podcasts <span>222</span></a></li>
<li class="item5"><a href="#">Robots <span>16</span></a></li>
</ul>
</div>最后，我们通过在每个现有列表项中嵌套一个无序列表来创建子菜单。
<div id="wrapper">
<ul class="menu">
<li class="item1"><a href="#">Friends <span>340</span></a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
</ul>
</li>
<li class="item2"><a href="#">Videos <span>147</span></a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
</ul>
</li>
<li class="item3"><a href="#">Galleries <span>340</span></a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
</ul>
</li>
<li class="item4"><a href="#">Podcasts <span>222</span></a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
</ul>
</li>
<li class="item5"><a href="#">Robots <span>16</span></a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
<li class="subitem2"><a href="#">Strange “Stuff” <span>6</span></a></li>
<li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
</ul>
</li>
</ul>
</div>好的，那里似乎有很多东西，但不要让它使您感到困惑。 首先，我们创建了一个无序列表，其中包含五个列表项，每个列表项内部都有一个定位标记。 然后，我们添加了嵌套的无序列表，每个都有三个列表项。
我还为每个列表项添加了一个类，以便稍后使样式设置更容易。 最后，对于数字，我们在每个锚定标记内创建了一个span标记。 如果在浏览器中查看它，则应如下所示：
步骤2：流畅的字体
我们首先要确保菜单显示正确。 将这些规则添加到css/styles.css ，它们会将所有ul的边距和填充设置为0，并删除列表样式。
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
} 在开始设置菜单样式之前，我们将创建一个具有固定宽度和13px字体大小（以em单位表示）的包装器。 首先，我们将一个规则添加到正文中， font-size:100%; 。 这将确保我们的样式基于浏览器的默认字体大小（通常为16px）。
现在解释包装字体大小如何工作。 我们必须将它表达为em ; 与其父字体的大小成比例。 我们的目标是13px，因此假设父尺寸为16px，我们得出的em为13 / 16 = 0.8125 。 13px是0.8125 * 16px。
以em为单位测量字体（和其他元素）会使它们流畅。 现在，如果我们更改包装字体大小（或浏览器默认大小），则整个菜单将根据该基础进行调整。 如果您在转换字体方面需要帮助，请尽量不要让您感到困惑，我建议您访问pxtoem.com 。
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
} 我们为包装器提供了220px的固定宽度，并通过添加margin:100px auto;使其居中并留有一些边距顶部margin:100px auto; 。
步骤3：主菜单CSS
接下来，我们将为菜单添加一些样式。 我们将菜单ul的宽度和高度设为auto ，然后将阴影应用于整个对象。 通过将高度自动添加，滑块打开时阴影将调整。
然后是锚标签； 我们将添加100％的宽度，这意味着它们将延伸到包装器的220px宽度。 对于高度，我们将使用ems，因此请回想一下我们的主字体大小为13px。 我们的.psd显示高度为36px，因此这是我们的目标。 我们将36乘以13除以得出约2.75em（ 36 / 13 = 2.76923077 ）。 我们还将使用2.75em作为行高（以使所有文本垂直居中），然后应用一些文本缩进将文本推入，以便稍后为我们的图标腾出空间。
我们将为背景添加CSS3渐变，我继续使用GradientApp创建了它。 接下来，我们将更改字体，我们将使用Helvetica Neue字体和白色以及文本阴影。 请注意，我们此处未使用字体大小。 这是因为我们的锚已继承的包装器的基本字体为13px，因此无需添加它。
body {
font-size: 100%;
}
a {
text-decoration: none;
}
ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}好的！ 现在看起来开始更好，我们也有了一些结构！ 但是我们如何添加背景色，以便菜单会更好地突出显示。
body {
background:#32373d;
}
提示：记住EM
从上面CSS中可以看出，很容易忘记em单元的实际含义。 最好保留原始计算的注释，以便将来再次使用代码时，仍可以了解正在发生的事情。 请记住以下公式： 所需像素数/父像素数=结果em ，如果要舍入结果，请使用近似符号（≈）。
#wrapper {
font-size: 0.8125em; /* 13/16 = 0.8125*/
}
.menu > li > a {
height: 2.75em; /* 36/13 ≈ 2.75*/
line-height: 2.75em; /* 36/13 ≈ 2.75*/
text-indent: 2.75em; /* 36/13 ≈ 2.75*/
}步骤4：子菜单CSS
是时候为白色子菜单添加一些CSS了。 我们需要添加带有一些灰色边框的白色背景。 请注意，最后一个没有底边框，因此我们将使用:last-child伪选择器将其定位为目标。 它确实具有深蓝色边框，因此我们将删除灰色边框，然后添加蓝色边框。
下一步将类似于上一步； 我们将再次添加高度和宽度，将背景更改为白色。 这次我们需要更改字体大小。 我们的目标是12px，因此使用我们所需的px /父px =结果em的计算，我们得到0.923em
让我们也将文本颜色更改为灰色。 注意，我们使用display:block 。 如果我们使用float:left菜单将无法平滑地进行动画处理，因此我们将使用显示块来帮助它们平滑流畅地移动。 您还会注意到我们添加了额外的样式； 我们将此应用到sub-ul的最后一个孩子。 我们需要这样做，以便我们能够更改边框颜色。
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}现在开始看起来非常好！
步骤5：悬停和主动样式
现在，我们将添加一些悬停和活动样式，尤其是在手风琴打开时！ 我们还将在活动菜单中添加边框底部。 现在，如果您在想，“为什么我们不增加一个活动班级？”。 好吧，我的朋友，这就是jQuery稍后将要做的事情。
.menu > li > a:hover,
.menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}第6步：主菜单图标
我们将使用:before伪添加图标。 首先，我们将所有sub-ul锚标记作为目标，我们将应用背景精灵并将其设置为不重复。 尽管没有文本，我们将其字体大小设置为36px。 我们将使用36px，因此我们可以使用1em的宽度和高度，现在等于36px。 然后，我们将元素下移50％，并从边距顶部移除.5em以将其居中。
使用每个sub-ul列表项的类，我们将它们定位为目标，并为每个sprite提供适当的背景位置。
注意：我使用名为SpriteRight的新应用程序创建了此精灵，如果您希望随意使用该精灵，则将图像和项目文件包含在源文件中。
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
步骤7：主菜单编号
好吧，还记得我们添加的那些跨度吗？ 这些将创建数字！
首先，我们将添加11px的字体大小（将转换为大约0.857em）。 我们将它们绝对定位，并再次将它们从右边向右推1em-使它们流畅。 我们将其从顶部向下推50％，并移除边缘顶部以使其居中。 将添加背景以及一些框阴影，插图和开始阴影。
再次使其流畅，我们将使用填充来创建宽度和高度。 我们甚至在边界半径上使用了ems。 我们需要这样做，因为如果将文本放大，它们会显得不成比例。 当鼠标悬停或将活动类应用于链接时，我还添加了另一种样式。
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
步骤8：子菜单编号和箭头
此过程将与上一步相似，因此我将不做过多详细介绍。 这里的主要区别是我删除了背景色，更改了边框并更改了字体颜色。 我们还需要添加该箭头，并将再次依靠:before psuedo。 我们定义宽度和高度，并使用ems添加一些左定位，以确保其流畅。
最后，处于悬停状态（感谢评论中指出其最初不在的状态）。 我们只需在锚文本，伪箭头和范围内的数字上应用较深的颜色（＃32373D）。
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}所以现在看起来很酷吧？ 我想是时候我们为此添加一些功能了！
步骤9：jQuery时间
打赌你一直在等着到达这里吗？ 好了，我们终于到了jQuery的地步。 我们首先需要使用Google托管的库链接到jQuery库。 当前最新版本是1.7.1。 将以下内容添加到HTML页面的开头部分：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 现在，在</body>标记之前，将以下内容添加到html文档的底部。 如果这看起来太令人困惑，请不要担心，我会在稍后解释。
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');首先，我们将子菜单和主菜单锚标记存储在两个不同的变量中，这使得以后易于引用它们。
menu_ul.hide();页面加载时，这将隐藏所有子菜单
menu_a.click(function(e) {首先，当我们单击主菜单的锚标记之一时，我们将告诉它执行某些操作。
e.preventDefault();在这里，我们防止锚标签跟随任何链接或更改地址栏中的地址。 例如，如果您创建带有链接“＃”的锚标记，则单击它时，该标记现在不会显示在地址栏中。 锚标记基本上是禁用的。
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');现在我们将指示它，如果menu_a具有“活动”类，请将其删除。
menu_ul.filter(':visible').slideUp('normal');这里我们使用'.filter'和'：visible'。 如果打开菜单，请以正常速度向上滑动。
$(this).addClass('active').next().stop(true,true).slideDown('normal');如果菜单关闭，则添加“活动”类（这样我们就可以访问漂亮CSS样式）并以正常速度将其向下滑动。
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');现在，我们需要将ELSE用作条件语句的一部分。 因此，ELSE删除活动的类，然后向上滑动菜单将其隐藏。 这仅仅是为了使我们可以编写任何菜单，而不必重新加载页面。
注意：如果您想更改幻灯片的速度，请将法线更改为“ 500”。 它将在500毫秒内滑动。
如果您有兴趣从头开始学习jQuery，建议您从tutsplus.com上免费学习30天学习jQuery课程。
结论
好吧，我们做到了！ 我们使用CSS3和jQuery编写了Orman漂亮的垂直导航菜单！ 请继续关注如何仅使用带有：target伪选择器CSS3创建此技巧的快速提示。
希望您喜欢本教程，感谢您的阅读！
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
