二级菜单不同方法的实现

最新推荐文章于 2024-07-15 16:33:04 发布
最新推荐文章于 2024-07-15 16:33:04 发布
阅读量165 收藏
点赞数
文章标签： 面试

之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。

第一种：

第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。

第二种：

主要采用hover,和display来实现的。

第三种：

采用的是js来控制的，mouseover，mouseout来控制显示的。当然也利用了css.

第四种：

这种也是纯css的形式，主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话，就会导致一级菜单被二级菜单顶起来，使得上面无法对其，因此才需要设置。

 

每一种对应的源码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>横排二级下拉菜单</title>

<style type="text/css">

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: #333;
}
.nav{
  width: 400px;
  height: 150px;
  background: Gray;
  margin: 10px;
  overflow: hidden;
}
.nav   ul li{
    float :left;
    width: 100px;
    clear: right;
}
.nav ul li a:hover{
  color:red;
}
.nav ul li ul { 
  display:none;
}
.nav ul li:hover ul{ 
  display:block; 
  position: absolute;
}
.nav ul li:hover ul li{ 
  float:none;/**/
}

/********************************************************/
.nav2{
  width: 400px;
  height: 200px;
  background: Gray;
  margin: 10px;
}
.nav2  ul li{
    width: 100px;
}
.nav2 ul li li{
  margin-left:20px; 
}
.nav2 a:hover{
  color: red; 
}
.nav2 ul li ul {
  display: none; 
}
.nav2 ul li:hover ul {
  display: block; 
}

/********************************************************/

.nav3{
  width: 400px;
  height: 150px;
  background: Gray;
  margin: 10px;
}
.nav3  ul li{
    width: 100px;
    float: left;
}
.nav3 ul li ul{
  display: none;
  position: absolute;
}
.nav3 ul li ul li{
  float: none;
}
.nav3 ul li a:hover{
  color:red;
}
/********************************************************/
.nav4{
  width: 400px;
  height: 200px;
}
.nav4 ul li{
  width:100px;
  display: inline-block;
  vertical-align: top;
}
.nav4 ul ul{
  display: none;
}
.nav4 ul li:hover ul{
  display: block;
}
.nav4 ul li a:hover{
  color:red;
}
</style>
</head>
<body>
<!--*****************111111111111111111111111111111111111***************/-->
<div class="nav">
  <ul>
    <li><a href="#">栏目一</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目二</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目三</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

  </ul>
</div>
<!--*****************22222222222222222222222222222222222***************/-->
<hr>
<div class="nav2">
  <ul>
    <li><a href="#">栏目一</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目二</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目三</a>

      <ul>
        <li><a href="#">二级栏目1</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目3</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

  </ul>
</div>
<!--*****************333333333333333333333333333333333333***************/-->
<hr>
<div class="nav3">
  <ul>
    <li class="row"><a href="#">栏目一</a>
      <ul>
        <li><a href="#">二级栏目1</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目3</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li class="row"><a href="#">栏目二</a>

      <ul>
        <li><a href="#">二级栏目1</a></li>
        <li><a href="#">二级栏目2</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li class="row"><a href="#">栏目三</a>

      <ul>
        <li><a href="#">二级栏目1</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目3</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

  </ul>
</div>
<!--*****************44444444444444444444444444444444***************/-->
<hr>
<div class="nav4">
  <ul>
    <li><a href="#">栏目一</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目二</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

    <li><a href="#">栏目三</a>

      <ul>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
        <li><a href="#">二级栏目</a></li>
      </ul>

    </li>

  </ul>
</div>
<script>
  var row=document.getElementsByClassName("row");

  var length=row.length;
  for(var i=0;i<length;i++){
    row[i].onmouseover=function(i){
      var that=row[i];
      return function(i){
        
        child=that.childNodes;
        child[2].style.display="block";

      }
   
    }(i);

    row[i].onmouseout=function(i){
      var that=row[i];
      return function(i){
        
        child=that.childNodes;
        child[2].style.display="none";
      
      }
   
    }(i);
  }

  console.log(row);
</script>
</body>
</html>

 

?Briella
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
c综合编程，二级菜单
06-26
图书管理系统，二级菜单，密码登录
链表与状态机
badmer的博客
08-30 671
1.单向链表概念以及相应操作： (1).基本概念： 结构体允许成员类型不相同，解决数组第一个缺陷。链表允许大小可变，解决数组第二个缺陷。（该缺点三个解决思路：拆迁，搬迁（c++/java支持），外部扩展（链表））。 链表就是用来存储数据的。链表用来存数据相对于数组来说优点就是灵活性，需要多少个动态分配多少个，不占用额外的内存。数组的优势是使用简单（简单粗暴）。 链表是由节点组成的，
Gridview中二级联动
weixin_30606669的博客
09-16 84
代码 protectedvoiddrpZuoyedian_SelectedIndexChanged(objectsender,EventArgse){DropDownListdrpZuoyedian=(DropDownList)sender;GridViewRowgvData=(GridViewRow)drpZuoyedia...
非常简单的二级联动菜单
11-06
二级联动菜单
下拉抽屉菜单加上横向gridview的实现
09-07
各种抽屉菜单越来越来多，需求各种奇葩，这是帮别人实现的一个下拉抽屉菜单，抽屉里面的布局是可以横向滚动的gridview。需要的朋友可以参考下。
JS二级菜单不同实现方法分析【4种方法】
10-17
JavaScript（JS）提供了多种方法来实现二级菜单，这篇文章将探讨四种不同的实现方式，它们各自利用了CSS和JavaScript的不同特性。 1. **CSS控制的二级菜单** 这种方法主要依赖CSS的`float`、`position`、`display`...
原生js实现二级联动菜单
10-15
这种菜单的特性是，当用户在第一级菜单中选择一个选项时，第二级菜单会根据所选的选项动态更新其内容。本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有...
js实现横向弹出二级菜单
06-05
本文将详细讲解如何使用JavaScript实现一个横向弹出的二级菜单，包括菜单的显示、隐藏以及响应式行为。 首先，我们需要在HTML中创建基本的菜单结构。二级菜单通常嵌套在一级菜单项下，利用`<ul>`和`<li>`元素来表示...
Android实现横向二级菜单
01-04
 这种横向的二级菜单在很多的app都有所应用.效果看起来还是非常的美观的.也算是项目需要,自己也就学了一下这个效果,首先说一下逻辑.实现的方式其实并不是很难..只不过逻辑上可能有点复杂.原理其实就是一个按钮.当...
简单网页二级菜单的实现
04-13
以上就是一个简单网页二级菜单的基本实现。通过HTML、CSS和JavaScript的结合，我们创建了一个易于理解和操作的交互式菜单。你可以根据自己的需求调整样式和交互效果，使其更符合网站的整体设计风格。在实际项目中，...
popupwindow 的二级联动菜单、ListView形式菜单、GridView形式菜单的Util
09-29
popupwindow下拉布局为：listView、Gridview、二级菜单listview。将其写成Util类，只要将数据源和在哪个控件弹出的对象传入就可以直接引用并且设置item的点击事件。
Material Design滑动菜单导航代码.zip
07-04
Material Design滑动菜单导航代码是一款基于jQuery CSS3实现的扁平风格设计和按钮点击波特效下载。
三种方式实现网页二级菜单
热门推荐
Bazingaea的博客
11-28 6万+
方法一：使用HTML和CSS实现   首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构   &lt;div class="test"&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt..
二级菜单的实现
dsh的博客
05-23 6520
导航栏布局借助于 标签 菜单的显示与隐藏借助于：hover伪类 html代码如下       首页   课程大厅                     javascript           jquery               学习中心               视频学习           案例学习           交流平台    
Menu菜单（二）————利用GridView实现自定义的OptionMenu
jandroid
09-06 114
Android 菜单(OptionMenu)大全 建立你自己的菜单 　　菜单是用户界面中最常见的元素之一，使用非常频繁，在Android中，菜单被分为如下三种，选项菜单（OptionsMenu）、上下文菜单（ContextMenu）和子菜单（SubMenu），今天这讲是OptionsMenu　 　　一、概述 　　public boolean onCreateOptionsMenu...
二级菜单——图书馆案例
qq_59708493的博客
01-15 968
#include<iostream> using namespace std; void menu01() { cout<<"您选择了项目1"<<endl; cout<<"请选择该栏目书名："<<endl; cout<<"1.《欢乐的经济学》---23元"<<endl; cout<<"2.《拖延心理学》---24元"<<endl; cout<<"3.《万历十五年》---29.
display属性和position属性和left属性一起使用显示标题
weixin_33830216的博客
02-27 154
header .banner-left{ height: 60px; width: 10%; display: inline-block; vertical-align: top; line-height: 60px; text-align: center; position: relative; left: 7%; backgroun...
java 二级菜单实现
bess的晋级之路
02-28 3798
查询数据库所有菜单项 @Override public List&lt;IntraMenu&gt; queryMenuListByUserCode(String userCode) { List&lt;IntraMenu&gt; menuList = new ArrayList&lt;IntraMenu&gt;(); String sql = "select * from fpd.T...
Kubernetes面试整理-Helm是什么？
最新发布
不务正业的猿
07-15 175
通过 Helm，您可以轻松地打包、配置、部署和管理 Kubernetes 应用程序，从而简化了应用程序的生命周期管理。Helm 是 Kubernetes 的包管理工具，它使得在 Kubernetes 上部署和管理复杂的应用变得更加简单和高效。Chart 是 Helm 中的打包格式，包含一个应用程序的 Kubernetes 资源定义集合。通过 Helm，可以使用简单的命令来安装复杂的应用程序，而无需手动编写大量的 Kubernetes 配置文件。可以从 Helm 的官方文档获取最新的安装方法。
html实现二级菜单
05-28
HTML实现二级菜单一般使用嵌套列表来实现，具体步骤如下： 1. 在HTML中创建一个无序列表（ul），列表项（li）即为一级菜单。 2. 在一级菜单中为需要添加二级菜单的菜单项添加一个子无序列表（ul）。 3. 在子无序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值