使用CSS 制作导航菜单 （二）

最新推荐文章于 2021-08-04 00:41:30 发布
最新推荐文章于 2021-08-04 00:41:30 发布
阅读量488 收藏
点赞数
文章标签： css javascript function jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoxue820/article/details/6068213
版权

方式二：使用jQuery 代码实现 

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>伸缩的菜单，用toggle()重写</title>

<style>

<!--

body{

    background-color:#ffdee0;

}

#navigation {

    width:200px;

    font-family:Arial;

}

#navigation > ul {

    list-style-type:none;                /* 不显示项目符号 */

    margin:0px;

    padding:0px;

}

#navigation > ul > li {

    border-bottom:1px solid #ED9F9F;    /* 添加下划线 */

}

#navigation > ul > li > a{

    display:block;                        /* 区块显示 */

    padding:5px 5px 5px 0.5em;

    text-decoration:none;

    border-left:12px solid #711515;        /* 左边的粗红边 */

    border-right:1px solid #711515;        /* 右侧阴影 */

}

#navigation > ul > li > a:link, #navigation > ul > li > a:visited{

    background-color:#c11136;

    color:#FFFFFF;

}

#navigation > ul > li > a:hover{        /* 鼠标经过时 */

    background-color:#990020;            /* 改变背景色 */

    color:#ffff00;                        /* 改变文字颜色 */

}

 

/* 子菜单的CSS样式 */

#navigation ul li ul{

    list-style-type:none;

    margin:0px;

    padding:0px 0px 0px 0px;

}

#navigation ul li ul li{

    border-top:1px solid #ED9F9F;

}

#navigation ul li ul li a{

    display:block;

    padding:3px 3px 3px 0.5em;

    text-decoration:none;

    border-left:28px solid #a71f1f;

    border-right:1px solid #711515;

}

#navigation ul li ul li a:link, #navigation ul li ul li a:visited{

    background-color:#e85070;

    color:#FFFFFF;

}

#navigation ul li ul li a:hover{

    background-color:#c2425d;

    color:#ffff00;

}

-->

</style>

<script language="javascript" src="jquery.min.js"></script>

<script language="javascript">

$(function(){

    $("li").find("ul").prev().click(function(){

        $(this).next().toggle();

    });

    $("li:has(ul)").find("ul").hide();

});

</script>

</head>

<body>

<div id="navigation">

    <ul id="listUL">

        <li><a href="#">Home</a></li>

        <li><a href="#">News</a>

            <ul>

                <li><a href="#">Lastest News</a></li>

                <li><a href="#">All News</a></li>

            </ul>

        </li>

        <li><a href="#">Sports</a>

            <ul>

                <li><a href="#">Basketball</a></li>

                <li><a href="#">Football</a></li>

                <li><a href="#">Volleyball</a></li>

            </ul>        

        </li>

        <li><a href="#">Weather</a>

            <ul>

                <li><a href="#">Today's Weather</a></li>

                <li><a href="#">Forecast</a></li>

            </ul>

        </li>

        <li><a href="#">Contact Me</a></li>

    </ul>

</div>

</body>

</html>

piaoxue820
关注
CSS导航栏的制作
m0_49830850的博客
08-19 1080
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link type="text/css" rel="stylesheet" href="../static/reset.css" /> <style> /* ...
网页设计与制作教程(HTMLCSSJavaScript)第2版第9章使用CSS制作导航菜单.pptx
最新发布
11-12
第9章使用CSS制作导航菜单主要介绍了使用CSS制作导航菜单的技术和方法。在本章节中，我们将学习如何使用CSS美化和布局页面，如何制作水平导航菜单，以及如何综合使用CSS修饰页面元素与制作导航菜单技术制作页面。 ...
jq+css+html简单实现导航下拉菜单
weixin_34007906的博客
11-15 249
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code. Html部分 1 &lt;div class="_nav"&gt; 2 &lt;ul id="sddm"&gt; 3 &lt;li&gt;&lt;a href="/Home/Index" id="a_nav_Home" c
css的navigation,CSS navigation
weixin_30443729的博客
08-04 563
June 25, 2014 Menu publishing error in html drop down menuI am trying to import code into an HTML page. I follow publish instructions , after clicking insert and publish , it gives me a menu publishin...
css的navigation,响应式导航（Responsive Nav） — 响应式导航插件（Responsive Navigation Plugin）...
weixin_29545475的博客
08-04 680
使用指南按照下面的步骤即可引入此插件并让其顺利的运行。如果在使用过程中发现bug，请提交到GitHubissues.引入文件添加标签HomeAboutProjectsContact启动此插件var navigation = responsiveNav("#nav");调整参数var navigation = responsiveNav("#nav", { // Selector: The ID ...
css的navigation,CSS3 Menu Bar - CSS Navigation Bar
weixin_33431252的博客
08-04 155
CSS3 Menu Bar Example - CSS NavigationCreate Your Own CSS Navigation Bar in MinutesEvery website needs a menu. CSS templates and tutorials for creating navigation bars have been in high demand ever si...
纯CSS制作二级导航下拉列表
04-30
在网页设计中，二级导航菜单是一种常见的交互元素，它能够帮助用户更方便地浏览网站的层级结构。本教程将详细讲解如何使用纯CSS技术来创建一个二级导航下拉列表，无需JavaScript，仅依赖HTML和CSS就能实现。这种方法...
css利用一张背景图制作导航菜单实现思路及代码
09-25
利用一张背景图片来制作一个具有悬停效果的导航菜单，是一种在网页设计中常见的技术手段。这种方法可以使导航菜单看起来更加吸引人，同时减少页面加载时间，因为只需要加载一张背景图片而不是多个图片。实现这种效果...
css3属性transform制作圆盘导航菜单代码
11-21
css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码
使用CSS3制作响应式导航菜单的方法
12-13
本教程将详细讲解如何利用CSS3实现一个无需JavaScript的响应式导航菜单，适用于各种移动和桌面浏览器，包括IE。 首先，我们需要创建HTML结构。在示例中，使用了标签，这是HTML5中的语义化标签，用于定义导航链接的...
左侧导航菜单div+css样式
11-03
左侧导航菜单div+css样式，样式非常好看，适合faq页面使用，分层级的可折叠菜单
vscode-css-navigation：允许从HTML到CSS转到定义，或从CSS到HTML查找引用
02-11
CSS导航-VSCode扩展 允许进入从HTML到CSS /无礼/更少，提供完成和工作区的符号类和ID名称的定义，并支持查询从CSS到HTML参考。 产品特点 转到定义和预览定义 在HTML文档中，选择Go to definition或Peek definition ，扩展名将在当前工作空间文件夹中搜索相关CSS＆Scss＆Less选择器。 也可以在嵌套参考&...搜索选择器以获取Sass＆Less。 您可以找到定义的地方： HTML（或由activeHTMLFileExtensions选项指定扩展名的文件）： < html-tag > ， class = “” class-name “ ， id =” id-name “ 。 JSX和TSX： className =“ class-name ” ， className = {“ class-name ”} 。 请注意，默认情况下，
css的navigation,Flying CSS3 Navigation Menu
weixin_35795675的博客
08-04 246
Flying CSS3 Navigation MenuToday, I would like to show you another pure css3 navigation menu where I implemented several nice animate effects. I have just taught our sub menus to fly from nothing, and...
css的navigation,CSS: Responsive Navigation Menu
weixin_29327525的博客
08-04 269
Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean...
css的navigation,html - CSS for navigation - Stack Overflow
weixin_34281501的博客
08-04 133
I have a HTML ul li based navigation requirement. How can I get the drop down to show up similar to how it looks like when we go to www.microsoft.com. For: ex if we go to www.microsoft.com and click o...
使用CSS 制作导航菜单
weixin_33978044的博客
11-26 345
方式一：直接编写代码实现 代码如下： <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { ...
css导航栏_CSS：创建导航栏
cunfen6312的博客
07-28 1016
css导航栏 CSS：创建导航栏 (CSS: Creating Navigation Bars) Every website needs a navgation bar to help visitors navigate around the website. This is generally accomplished by putting a top horizontal navigatio...
使用CSS 制作导航菜单 （一）
飘雪的随笔
12-10 617
<br />方式一：直接编写代码实现 <br />代码如下：<br /><br /><html><br /><head><br /><title>无需表格的菜单</title><br /><style><br /><!--<br />body{<br />    background-color:#ffdee0;<br />}<br />#navigation {<br />    width:200px;<br />    font-family:Arial;<br />}<br />#navigatio
HTML+CSS3纯CSS导航菜单实例与下载
本文档主要介绍了如何使用纯HTML和CSS3技术来创建一个美观且功能齐全的导航菜单。这个导航菜单设计适用于多种现代浏览器，包括IE9、Google Chrome、Firefox和Safari，确保了跨平台的兼容性。作者分享了整个制作过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值