css下拉菜单汇总案例

最新推荐文章于 2024-07-13 11:50:40 发布
最新推荐文章于 2024-07-13 11:50:40 发布
阅读量465 收藏 1
点赞数
文章标签： HTML CSS 下拉菜单 前端开发 交互设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46664185/article/details/120988141
版权

1.基础的下拉菜单

将鼠标移到元素上时出现的下拉框。效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>

    <h1>可悬停的下拉菜单</h1>

    <p>请把鼠标移到文本上，已查看下拉内容。</p>

    <div class="dropdown">
        <span>把鼠标移到我上面</span>
        <div class="dropdown-content">
            <p>Hello World!</p>
        </div>
    </div>

</body>

</html>

2.下拉式菜单

将鼠标移到元素上时出现的下拉菜单。效果如下：

 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>

    <h1>下拉菜单</h1>

    <p>请把鼠标移到按钮上，以打开下拉菜单。</p>

    <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>

</body>

</html>

3.对齐的下拉菜单

下拉菜单左对齐和右对齐，如图所示：

 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>
    <p>通过 left 和 right 属性，决定下拉内容是左到右还是右到左。</p>
    <div class="dropdown" style="float:left;">
        <button class="dropbtn">Left</button>
        <div class="dropdown-content" style="left:0;">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <div class="dropdown" style="float:right;">
        <button class="dropbtn">Right</button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>

</html>

 4.下拉图片

鼠标经过显示下拉图片

 

 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>下拉图片</h1>
    <p>请把鼠标移动到图像上，以打开下拉内容。</p>
    <div class="dropdown">
        <img src="../../bootstrap-4.6.0-dist/img/tp-detail-advantage1.jpg" alt="Coffee" width="100">
        <div class="dropdown-content">
            <img src="../../bootstrap-4.6.0-dist/img/tp-detail-advantage1.jpg" alt="Coffee" width="300" height="200">
            <div class="desc">下拉图片</div>
        </div>
    </div>
</body>

</html>

 

5.下拉式导航

在导航栏中添加下拉菜单，效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        
        li {
            float: left;
        }
        
        li a,
        .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        
        li a:hover,
        .dropdown:hover .dropbtn {
            background-color: red;
        }
        
        li.dropdown {
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }
        
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </li>
    </ul>
    <p>请悬停到 "Dropdown" 链接上，以查看下拉菜单。</p>
</body>

</html>

 

 

 

忘川...
关注
JS基础-下拉菜单案例
qq_43781887的博客
04-18 4887
要实现的效果： 整体思路： 1.布局思路：我外面用了一个大div包裹，里面是ul里面4个li，每个li里面包括上面的a标签和下面的ul列表，下面的ul列表包含3个li。下面的ul采用的是绝对定位。 2.功能实现思路：首先获取元素，获取的是上面的4个li元素，给每个li一个onmouseover事件，然后移动到li的时候就先干掉所有人把当前li的第二个子元素节点显示出来（也就是下面那个列表）。 完整代码： <!DOCTYPE html> <html lang="en">
HTML静态网页作业：使用html+css制作北京黎红学院学校网站 (4个页面)
专注于dreamweaver网页设计制作
08-14 503
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
下拉菜单案例
qq_34272315的博客
12-27 461
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul {
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 1021
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
美观下拉框实例2
oscar999
07-25 129
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"&gt; &lt;h
445day（下拉菜单案例）
orangecloudy的博客
12-23 192
《2018年12月23日》【连续445天】 标题：下拉菜单案例； 内容： &lt;body&gt; &lt;div class="wrap"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="javascript:void(0);"&gt;一级菜单1&lt;/a&gt; &lt;ul class
css-下拉菜单案例
weixin_30532759的博客
07-12 80
<!DOCTYPE html>CSS4-布局2-display下拉菜单案例 <style>.xiala{width:200px;background:#ddd;}.xiala li div{position:absolute;width:150px;height:150px;background:#999;} /*下拉菜单代码*/.xiala li div{d...
史上最全的前端资源案例大汇总_附Demo.rar
03-18
导航菜单是网站的重要组成部分，案例可能包括下拉菜单、滑动菜单、汉堡菜单等各种类型，展示如何使用JavaScript和CSS创建交互式导航。 轮播图是网站常见的一种展示方式，用于展示多张图片或内容。开发者可以从案例...
Introduction to Website Design and Development_ HTML5, CSS3, and JavaScript
09-25
- 介绍如何使用HTML和CSS来创建列表和下拉菜单。 - 包括无序列表、有序列表等的使用方法。 - 学习如何通过CSS美化列表样式。 16. **第16章：表格** - 介绍如何使用HTML表格。 - 包括表格的基本结构和CSS样式...
HTML5+CSS3.0+JQUERY+JS+XHTML手册集合
01-23
此外，JQuery丰富的插件生态系统，如LigerUI，进一步丰富了前端功能，提供了诸如表格、下拉菜单、对话框等组件，加速了开发进度。 JavaScript是网页开发中的脚本语言，它与HTML和CSS紧密配合，实现页面的动态交互。...
js和css实现的19个菜单栏案例
03-23
css和js实现的19个菜单栏案例，希望对网页开发的同学有帮助
下拉列表例子
12-19
import java.util.ArrayList; import java.util.ListIterator; public class ArrayListDemo { public static void main(String args[]) { // create an array list ArrayList al = new ArrayList(3); System.out.println("Initial size of al: " + al.size()); // add elements to the array list al.add("C"); al.add("A"); al.add("E"); al.add("B"); al.add("D"); al.add("F"); al.add(1, "A2"); System.out.println("Contents of al: " + al); System.out.println("Size of al after additions: " + al.size()); // display the array list System.out.println("Contents of al: " + al); // Remove elements from the array list al.remove("F"); al.remove(2); System.out.println("Contents of al: " + al); // System.out.println(al.get(2)); // System.out.println(al.indexOf("E")); ListIterator li = al.listIterator(); while(li.hasNext()) { System.out.println(li.next()); } al.clear(); System.out.println(al); } }
下拉列表的例子
02-16
一个简单的下拉列表的例子，适合初学者学习，简便通用。
CSS菜单实例：一款简单的CSS下拉菜单
u013680195的专栏
03-11 624
昨天52CSS和大家共同参考了一款两级CSS菜单。有网友说是很早以前就有的了，知识不在于新旧，而在于是不是实用，您或许已经学习了解这款菜单的制作与实现，但不一定所有人都见过都能理解。本站提供的信息尽可以照顾到CSSer各个层面的需求，而不是一味的追求CSS技术，尽力做到新手，高手都能有所收获吧。 　　这款菜单的实现非常简单，没有用到复杂的JS代码，进行简单的变换就可以了。我们来看最终的效果，
下拉菜单案例（children+this）
zuo_zuo_blog的博客
05-05 963
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; ...
CSS水平下拉菜单设计教程
"一个利用CSS实现的具有独特设计的水平下拉菜单，代码简洁且具有良好的浏览器兼容性。" 在网页设计中，下拉菜单是一种常见的导航元素，它可以帮助用户在不离开当前页面的情况下访问网站的多层次结构。本文将详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值