简单的单级下拉菜单实现,级下拉菜单

Zurb开发的第5版本Foundation使得顶部工具栏表现为非常突出,出色的顶部工具栏差不多成为一个由Foundation搭建起来网站的象征元素。今天我们将学习如何通过不同方式去实现它,把它放置在页面的其他地方,让你拥有自定义样式和响应式的水平导航菜单。

简单的单级下拉菜单实现,级下拉菜单

首先我们将需要最新版本的Foundation。解压源码包并且把所有的文件放置在你的工程或者测试目录下。我们将直接使用index.html文件,创建一个style.css样式文件将用来重写顶部工具栏的样式来达到自定义导航栏效果。

效果预览

这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单。

搭起HTML结构

基本思路

在菜单处于光标之下时显示菜单,其余时候隐藏。这个过程首先得想到 :hover
伪类来实现,但是直接的利用伪类还不行,因为普通状态下菜单隐藏了,没办法触发
:hover
,不过下拉菜单隐藏了不是还有菜单标题么,菜单标题处于光标之下时显示菜单就能够显示出来了,但是鼠标移到菜单上的时候下拉菜单又会消失,这个时候想到给下拉菜单也加上
:hover
显示自身,但是万一脑洞大开,要做分体菜单怎么办,这个时候把它放进一个容器呗,利用标签的嵌套关系,去给容器的
:hover 伪类的派生元素写样式就一切搞定啦。

第一步:常用的模板

上HTML结构

 1 <ul id="dropdown-wrapper">
 2 <li>
 3     Rewrite
 4     <ul class="dropdown-sublist">
 5         <li>Kotarou</li>
 6         <li>Kotori</li>
 7         <li>Akane</li>
 8         <li>Kagari</li>
 9         <li>Lucia</li>
10         <li>Shizuru</li>
11         <li>Chihaya</li>
12     </ul>
13 </li>
14 <li>
15     Clannad
16     <ul class="dropdown-sublist">
17         <li>Tomoya</li>
18         <li>Nagisa</li>
19         <li>Ushio</li>
20         <li>Ryou</li>
21         <li>Kyou</li>
22         <li>Yukine</li>
23         <li>Fuko</li>
24         <li>Tomoyo</li>
25         <li>Kotomi</li>
26     </ul>
27 </li>
28 <li>
29     Air
30     <ul class="dropdown-sublist">
31         <li>Yukito</li>
32         <li>Misuzu</li>
33         <li>Kano</li>
34         <li>Minagi</li>
35     </ul>
36 </li>
37 </ul>

 

index.html文件里面已经预包含一些HTML代码。你可以保留

CSS

实现的关键就在那些打惊叹号的规则,写好显示与不显示时两个状态的下拉菜单的属性。同时添加了一些渐变以及平移让菜单显示更加自然。

 1 body{ margin:0; padding:0;
 2 
 3     font-size:18px;
 4 
 5     background-color:#aaa;
 6 }
 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;}
 8 #dropdown-wrapper{
 9     display:block;
10 
11     margin:4em 1em 0 1em;
12 }
13 #dropdown-wrapper li{
14     /*!!!!!!!!!!!!*/
15     display:inline-table;
16     padding:0;
17     margin:0;
18 
19     position:relative;
20 
21     width:10em;
22 
23     background:#fff;
24 
25      -webkit-transition:all ease-in-out 0.3s;
26     transition:all ease-in-out 0.3s;
27 }
28 #dropdown-wrapper span{
29     display:block;
30     padding:0.4em 1em;
31     width:10em;
32     color:#333;
33 }
34 #dropdown-wrapper span:after{
35     display:inline-block;
36     float:right;
37     content:">";
38 
39     -webkit-transform:rotate(0deg);
40     transform:rotate(0deg);/*为了渐变*/
41 
42      -webkit-transition:all ease-in-out 0.3s;
43     transition:all ease-in-out 0.3s;
44 }
45 #dropdown-wrapper li:hover span:after{
46     -webkit-transform:rotate(90deg);
47     transform:rotate(90deg);/*划过的时候那个右箭头旋转90度,变成朝下的啦*/
48 }
49 #dropdown-wrapper li ul{
50     /*!!!!!!!!!!!!*/
51     display:block;
52     position:absolute;
53 
54     padding:0;
55     margin:0;
56 
57     height:0;/*平时的时候隐藏下拉列表*/
58     line-height:0;/*0行高,这个的作用是用来制造一个文字展开的效果*/
59     overflow:hidden;
60 
61     color:#555;
62 
63     opacity:0;
64 
65     -webkit-transform:translateY(-1em);
66     transform: translateY(-1em);
67 
68      -webkit-transition:all ease-in-out 0.3s;
69     transition:all ease-in-out 0.3s;
70 }
71 #dropdown-wrapper li ul>li{
72     padding:0.7em 1em;
73 
74 }
75 #dropdown-wrapper li:hover ul{
76     /*!!!!!!!!!!!!*/
77     /*这是容器处于光标下时的下拉列表的状态,
78      *这个时候就是要做的就是显示下拉菜单咯
79     */
80     opacity:1;
81     height:auto;
82     line-height:1em;
83 
84     -webkit-transform: translaY(0);
85     transform: translateY(0);
86 }
87 #dropdown-wrapper li:hover span{
88     color:rgb(0,173,238);
89 }
90 #dropdown-wrapper li:hover ul>li:hover{
91     background:rgb(0,173,238);
92     color:#eee;
93 }

里面的代码,也可以保留所有的脚本链接。保留这些来确保Foundation的网格系统和顶部工具栏可以运行起来。

帮忙写个简单下拉菜单代码

已经过IE6,Opera测试,把下面代码复制粘贴到文本文件,改后缀为.html,双击即可看到效果,运行时要能上网,除非你把jquery-1.5.2.min.js下载到本地

<html xmlns=”www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript”
src=”code.jquery.com/jquery-1.5.2.min.js”></script>
</head>
<style>
body{background:#000;margin:0;padding:0;}
新澳门萄京娱乐场官网,ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:”宋体”;color:#999;text-decoration:none;text-

align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#eee;width:100%;}
#nav a,#nav
a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;font

-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;border-

right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}

hr{width:100%;height:0px;border:none;border-top:1px solid
#fff;overflow:hidden;font-

size:1px;display:block;clear:both;
line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}

#cbox{position:absolute;top:32px;left:0;}
#cbox
ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul……余下全文>>
 

你可以删掉其他内容代码,我们将采用一种全部宽度的设计,这不是很复杂的,只是需要想到更好的办法来处理它。

简易三级下拉菜单的CSS代码最好有DIV的

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“www.w3.org/…al.dtd”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>三级dropdown弹出菜单</title>
<style type=”text/css”>
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative;
margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block;
text-decoration:none; color:#000;width:104px; height:20px;
text-align:center; color:#fff; border:1px solid #fff;
background:#710069; line-height:20px; font-size:11px;
overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px;
left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd;
color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul ……余下全文>>
 

效果预览
这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单。
基本思路…

好的,我们将编写header、导航、主内容和footer区域的内容,我们将给每个区域都添加class=”full-width”,然后再添加一个块元素

,块元素里面再添加一个块元素

,这也就是搭起基本的网格结构。

备注:更多关于网格系统如何运行的,可以回顾教程第二章:WEB前端框架-Foundation之网格系统

Foundation-4CustomTopBar

Loremipsumdolorsitamet,consecteturadipisicingelit.Harum,asperiores,voluptas,veniamcommodiimpeditteneturdolorescumquefacereexplicaboessequaeratveritatislaboriosameiusmodiametmaximenonofficianemo?Iste,quisquam,voluptatum,dolornamreiciendisundealiquamnumquamnecessitatibusodioetperspiciatisfacerenihilinventoreullamaspernaturcorporisveritatisquiadolorum?Sed,hic,eosquisquibusdameumautoptiorepudiandaeat!Eligendi,nequerationealiasenimquaemagnamdoloresessepariaturearumlaborumreiciendisnobissuntsequisapienteducimusiureipsam.Sapiente,minima,rerum,facerequossaepepariaturmagnidoloremcumametnemoquislaborumipsadignissimosducimusinventoremodiremcumquequibusdamquamasperiores!Optio,nobissuscipitmolestiasvoluptasveritatisaspernaturaccusamusexcepturiremquaeratimpeditanimivoluptateatfacilisaliquidcumfugitlaboreomnisprovidentrecusandaeautem.Doloribus,mollitiaquosofficiisquassapientenamdolorpraesentiummaximecupiditateillum?Rem,esse,nullavitaeadipiscisequidelenitiquasi!

©2014

第二步:顶部工具栏标记

在编写样式之前,我们需要编写出一些必须的HTML结构代码使得Foundation顶部工具栏能够正确地运行起来。因此需要5样基础元素使得引擎跑起来。

= 为了增强在手机布局上的菜单。

现在我们用这5样基础元素来搭建基础框架并且实现功能。

备注:在此教程例子中,我们将创建一个自定义的导航菜单,因此删除一些包括logo、文本和图片的标题。因此从下面代码例子可以看到在块元素

里的

里面是空的。

接着,我们来添加一些菜单元素和一个下拉菜单代码,在你想添加下拉菜单的li元素里添加class=”has-dropdown”,然后在里面包含下拉菜单代码

。如果想表示当前使用状态的li,则需要添加”active”。

Menu

Home

Aboutus

Ourproducts

Portfolio

Blog

Prices

Features

Modalboxes

Submenu’sandnavigation

Pricetables

Buttons

Buttongroups

Labels,KeystrokesandTooltips

Alertboxes

Columns

Contact

第三步:目前效果

现在可以在你的浏览器上看到目前的效果,基于Foundation框架使用顶部工具栏我们已经创建一个水平菜单。为了方便把菜单放置到其他地方,而不是固定在浏览器的顶部,我们需要在以上代码外层添加网格的

当你在调整浏览器窗口时,会发现菜单栏在预先设定的断点发生改变。

接下来着手编写自定义样式,将关注如何去编写顶部工具栏的样式和可以使用哪些class。

编写CSS

第一步:通用样式

如果你还没做好准备,可以创建一个css文件,命名为style.css并且放置到下载下来的Foundation工程下css文件夹下。但别忘记把此引用到index.html文件里。如下代码示例:

Foundation4

这里如果你不把style.css放置在foundation.css下面,将不会覆盖原来顶部工具栏的样式。

很好,接下来我们要为header、导航、内容和footer写一些基础样式,如导航块,我们将添加一张已经下载好的背景图。这些通用样式一般不是很难去实现的,见如下代码示例,我们添加一个class”full-width”到每个区域中,以致于每个区域的宽度都是占满浏览器宽度的。

background-color:#ccc;

/**Setthebackgroundsforthedifferentsections**/

.header-area{

background-color:#2d465c;

min-height:160px;

.navigation-area{

background-image:url(‘../img/navigation-container.jpg’);

background-repeat:repeat-x;

.content-area{

padding:50px070px0;

.footer-area{

background-color:#1f1f1f;

color:#fff;

min-height:50px;

padding:20px000;

.full-width{

min-width:100%;

position:relative;

color:#fff;

font-weight:normal;

margin-top:50px;

第二部:顶部工具栏样式

现在看一下效果,会发现菜单会往外偏移一点,原因就是使用默认的样式,接下来修复这个问题!

有一些样式类是需要修改以达到想要的效果。首先,我们将在.top-bar和.top-bar-section
li里移除黑背景,改变height和line-height为58px。如下代码,可看注释帮助理解。

/**Changesbackgroundcolor,heightandmarginoftheborder**/

background:none;

height:58px;

line-height:58px;

margin-bottom:0;

/**Removesblackbackgroundonmenubar**/

.top-bar-sectionul{

background:none;

text-transform:uppercase;

/**Removesblackbackgroundonmenuitem**/

.top-bar-sectionlia:not{

background:none;

line-height:58px;

padding:027px;

我们已经移除黑背景了,并且适应高度、行高和内边距,将文字转化为大写字母,这些都是为了适应我们自定义设计。

如果你进行刷新页面,可以看到出现雏形了,我们继续编写下拉菜单、菜单子项目、激活的状态的样式吧。继续往下看代码示例,并阅读注释:

/**Changestheactivemenuitemfromdefaultblacktoagradient**/

.top-bar-sectionulli.active>a{

background:rgb;

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesthehoverstateofnonactivemenuitems**/

.top-bar-sectionli:hovera{

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesnonactivemenuitemstextcolortoblack**/

.top-bar-sectionulli>a{

color:#2d2d2d;

/**Changesthehoverstateofdropdownmenuitems**/

.top-bar-sectionul.dropdownlia:hover:not{

background:nonerepeatscroll00rgba;

/**IMPORTANTfillfortheuldropdowncontainer**/

.top-bar-sectionul.dropdown{

background:#333;

color:#fff;

/**Thisfixesthepositionandthecolorofthedropdownarrow**/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

我们已经改变菜单的好几个地方,如首先,我们就改变激活菜单默认的黑背景为“CSS渐变”,接着给不激活菜单添加hover状态,并改变里面的文字颜色为深灰色,目的是显示得更为清晰。然后.top-bar-section
li:hover
的样式将使得下拉菜单里的子项目被鼠标悬空时显示特定效果。为了完善样式,我们ul.dropdown添加一个背景颜色和重新设置下拉菜单箭头的位置,是因为我们内边距适应.top-bar-section。

第三步:效果

重新刷新页面,看一下现在的效果,我们还没完成样式的编写,只是想看看当调整浏览器的大小时,页面效果是否显示正常。接下来我们将添加“媒体查询”代码来实现这种效果。

编写媒体查询

第一步:媒体查询

我们需要做些操作来使得使用我们自定义样式的菜单栏能够适应不断缩小的屏幕。这里主要涉及到添加一些内边距、行高、文本颜色和背景颜色。如下CSS代码示例,查看每个section的注释。

@mediaonlyscreenand{

/*Makestheresponsivemenufitinthenavigationcontainerandchangeitsbackgroundtoblack*/

.top-barul{

background-color:rgba;

padding-bottom:13px;

/*Changenonactivemenuitemcolortoblack*/

.top-bar-sectionulli>a{

color:#fff;

/*Givesthedropdownulablackfill*/

.top-bar-sectionul{

background:#000;

/*GivetheBACKbuttonaftergoinginasubmenutheappropriatefilling*/

.top-bar-section.dropdownli.titleh5a{

line-height:57px;

/*Thisfixesthepositionandthecolorofthedropdownarrow*/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

}/*endmediaquery*/

第二步:享受你的效果

保存文件,然后重新刷新页面,不断地调整浏览器窗口的大小,你就会看到菜单栏都能很好地展示出来。

总结

最后,总结一下此教程:我们如何利用Foundation5框架里的顶部工具栏来创建一个自定义菜单。需要记住的一点是,菜单栏不一定要被放置在页面的顶部的,可以使用网格系统来包含它,然后就可以放置任何你想放置的地方。

Foundation是一系列非常有用的工具可以快速地创建起响应式网站设计,当你不断地熟悉Foundation这个框架,就可以更高效地、创意地创建出更多好玩的东西出来,继续努力吧!

发表评论

电子邮件地址不会被公开。 必填项已用*标注