JavaWeb学习之路(52)–CSS应用实例之下拉菜单

1. 前言

下拉菜单也是使用频率很高的网页控件,例如百度首页上方的【设置】按钮就是一个下拉菜单,当我们的鼠标指向该按钮时,会弹出下拉菜单。


本篇我们就通过CSS来一步一步编写一个简单的下拉菜单。


2. 开发过程

2.1 HTML元素组成

首先我们确定下HTML元素部分,有一个按钮button,然后按钮下面是菜单区域div,菜单区域包含多个链接a。然后下拉菜单作为一个整体,我们用一个div包裹起来。所以HTML代码如下:


<body>

   <div class="dropdown">

       <button class="dropdown-button">下拉菜单</button>

       <div class="dropdown-menu">

           <a href="#">菜单1</a>

           <a href="#">菜单2</a>

           <a href="#">菜单3</a>

       </div>

   </div>

</body>


其中drowdown表示下拉菜单,dropdown-button表示按钮,dropdown-menu表示菜单区域。此时由于尚未编写任何CSS样式代码,效果如下:



2.2 设定按钮样式

我们一步一步来处理下拉菜单,首先编写按钮的样式,代码如下,注意看注释:


    /* 按钮样式 */

 .dropdown-button {

           /* 颜色采用之前用过的百度蓝 */

           background-color: #4569FF;

           /* 字体采用白色 */

           color: white;

           /* 不要边框线 */

           border: none;

           /* 使用圆角 */

           border-radius: 8px;

           /* 将按钮撑的大一些 */

           padding: 8px;

       }


此时效果如下:


另外我们希望当鼠标悬停到下拉菜单区域时,按钮颜色能变化,这样有一个动态的效果,所以添加CSS代码:


 /* 当鼠标悬停于下拉菜单上方时,按钮样式 */

       .dropdown:hover .dropdown-button {

           background-color: blue;

       }


此时当鼠标移到下拉菜单上方时,颜色变化为更深的蓝色。



2.3 设置菜单区域样式

首先菜单区域默认应该是不显示的,然后应设定一个宽度和边框,让下拉菜单区域能够有一个好看的边界:


   /* 下拉菜单 */

       .dropdown-menu {

           /* 默认不显示 */

           display: none;

           /* 设置宽度 */

           width: 160px;

           /* 设置边框 */

           border: 2px solid #E5F1FB;

       }


此时效果如下:



当鼠标悬停到下拉菜单上方时,菜单区域应显示出来:


/* 鼠标悬停时,显示菜单区域 */

       .dropdown:hover .dropdown-menu {

           display: block;

       }


所以悬停时,效果如下:



2.4 设置菜单中链接样式

菜单中的超级链接应该是垂直排列,此时我们可以调整其盒模型为block,这样就独占一块了。另外链接字体设为黑色,并通过padding增大间距。


 /* 链接样式 */

       .dropdown-menu a {

           /* 换行 */

           display: block;

           /* 黑色字体 */

           color: black;

           /* 增大间距 */

           padding: 8px 12px;

           /* 去掉下划线 */

           text-decoration: none;

       }


此时效果如下:


然后我们再给鼠标悬停的链接增加一个选中效果:


  /* 链接悬停样式 */

       .dropdown-menu a:hover {

           /* 颜色值为按钮默认颜色,有呼应效果 */

           background-color: #4569FF

       }


悬停时,效果如下:



2.5 设置下拉菜单样式

还有一个非常重要的点,可能不容易发现,就是目前下拉菜单整体是一个div,它会占用一个块,也就是说整行的空间都被其占用。表现为鼠标移到下拉菜单右侧时,也会引发菜单区域展开。


但是我们实际希望下拉菜单,只占用看到的那些区域就OK,此时很简单,设置盒模型为inline-block即可,行内-块级元素,即占据空间,又不会引起换行。


 /* 整个下拉菜单 */

       .dropdown {

           display: inline-block;

       }


此时鼠标只有在下拉菜单上方,才会触发菜单区域展开。


3. 小结

下拉菜单已经做出来了,其实还不够完善,要做一个完美的网页控件,可能需要大量的工作,尚需努力!


上一篇:JavaWeb学习之路(45)–CSS之溢出


下一篇:C#+SQLServer 用户信息增删改查实战