[分享]css做自适应导航变下拉列表

CSS做自适应导航变下拉列表是一个很常见的网页开发需求。在移动设备上，因为屏幕尺寸的限制，导航栏可能会占据页面宝贵的空间。而下拉列表则可以折叠起导航栏，以节省空间。 首先，我们需要为导航栏和下拉列表设...

CSS做自适应导航变下拉列表是一个很常见的网页开发需求。在移动设备上，因为屏幕尺寸的限制，导航栏可能会占据页面宝贵的空间。而下拉列表则可以折叠起导航栏，以节省空间。

首先，我们需要为导航栏和下拉列表设定一些基本的样式。比如，设定导航栏的高度和背景色，为下拉列表设置背景色和位置等样式。代码如下：

/* 导航栏样式 */
nav {
  height: 50px;
  background-color: #333;
}
 
/* 下拉列表样式 */
.dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #fff;
  display: none;
} 

接下来，我们需要使用JavaScript或jQuery来控制下拉列表的显示和隐藏。这里我们以jQuery为例。当用户点击导航栏中的下拉列表按钮时，下拉列表会显示出来；再次点击按钮则会隐藏下拉列表。代码如下：

/* 显示下拉列表 */
$('.dropdown-toggle').click(function(){
  $('.dropdown').toggle();
});
 
/* 隐藏下拉列表 */
$(document).click(function(event){
  if(!$(event.target).closest('.dropdown-toggle').length) {
    $('.dropdown').hide();
  }
}); 

最后，我们需要为导航栏中的每个菜单项添加样式，比如鼠标悬停时的背景色等。代码如下：

/* 导航栏菜单项样式 */
nav li {
  display: inline-block;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
  color: #fff;
}
 
/* 鼠标悬停时的样式 */
nav li:hover {
  background-color: #666;
}
 
/* 下拉列表菜单项样式 */
.dropdown li {
  display: block;
  font-size: 16px;
  line-height: 40px;
  padding-left: 20px;
  color: #333;
}
 
/* 鼠标悬停时的样式 */
.dropdown li:hover {
  background-color: #ddd;
} 

完成上述步骤后，我们就成功地实现了一个自适应导航变下拉列表的效果。这个效果不仅可以让网站在移动设备上更加友好，也可以使网站看起来更干净、整洁。