二级导航栏的展开

最新推荐文章于 2024-05-27 17:27:19 发布
最新推荐文章于 2024-05-27 17:27:19 发布
阅读量1k 收藏
点赞数 1
文章标签： class jquery菜单 xhtml div 脚本 html
本文介绍了一种仅使用CSS和XHTML实现的简洁下拉菜单。该菜单具备良好的交互性和美观性，通过简单的CSS样式调整即可实现下拉效果。文章展示了具体的HTML结构和CSS样式代码，有助于开发者快速上手。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS+XHTML下拉菜单</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
font:12px Verdana, Geneva, sans-serif #333;
line-height:1.5;
}
ul li {
list-style:none;
}
.menu {
width:660px;
margin:20px auto;
}
.menu li {
display:inline;
float:left;
margin:0 5px;
background:#f2f2f2;
border:1px #39c solid;
text-align:center;
font-size:14px;
font-weight:700;
line-height:30px;
cursor:hand;
}
.tuckUp {
display:inline;
width:120px;
height:30px;
overflow:hidden;
background:#f2f2f2;
}
.pullDown{
display:inline;
height:auto;
}
.item a:link, .item a:visited {
    display:inline;
float:left;
width:110px;
background:#ccc;
text-align:center;
color:#444;
font-size:12px;
font-weight:normal;
text-decoration:none;
line-height:25px;
margin:0 5px 5px 5px;
}
.item a:hover {
display:inline;
float:left;
background:#39c;
width:100px;
color:#FFF;
text-decoration:none;
text-align:center;
font-size:12px;
font-weight:700;
font-weight:normal;
line-height:25px;
padding:0 0 0 10px;
margin:0 5px 5px 5px;
}
//
-->
</style>
</head>
<body>
<ul class="menu">
<li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">精品特效
    <div class="item"><a href="/">网页特效</a></a><br />
      <a href="/">层和布局</a></a><br />
      <a href="/">表单按钮</a><br />
</div>
</li>
<li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">菜单导航
    <div class="item"><a href="/">菜单导航</a><br />
      <a href="/">CSS菜单</a><br />
      <a href="/">JQUERY菜单</a><br />
</div>
</li>
<li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">源代码
    <div class="item" ><a href="/">源码下载</a><br />
      <a href="/">ASP分类</a><br />
      <a href="/">PHP分类</a><br />
      <a href="/">ASP.NET</a><br />
</div>
</li>
<li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">更新汇总
    <div class="item"><a href="/">最新更新</a><br />
      <a href="/">最新更新</a><br />
      <a href="/">网站首页</a><br /></div>
</li>
<li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">脚本下载
    <div class="item"><a href="/">脚本资源</a><br />
      <a href="/">AJAX</a><br />
      <a href="/">JQUERY</a><br />
      <a href="/">EXTJS</a><br />
</div>
</li>
</ul>
</body>
</html>

wuaijian521
关注
纯CSS精美二级导航栏
05-09
纯CSS精美二级导航栏，博客http://www.cnblogs.com/hxsyl/p/4489518.html
vue实现二级导航栏效果
10-16
本文将深入探讨如何利用Vue.js实现一个二级导航栏效果。 ### Vue.js基础 Vue.js是一个构建用户界面的渐进式框架，其核心库只关注视图层，易于上手，且能够方便地与现有的项目集成。在Vue.js中，组件是核心概念之一...
二级导航栏
kleinBlue.的博客
09-20 283
css 样式 为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式 同时也是为了巩固 css 和 sass 的知识 目的是为了：适应每一个项目自己重置样式,创造属于自己的 style 虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点 但还是决定做更加适合前端工作的 css 样式，我并没说是 css 框架，因为还需要不断更新 自己在空余时间也会不断的去优化，学习和进步 @charset "UTF-8"; * { mar
二级导航栏（html、css)
热门推荐
leihao-lester
10-13 1万+
二级导航栏（html、css) 效果图： 完整代码如下： <!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
可点击展开与收缩的左侧纵向二级导航菜单
11-20
在IT行业中，构建一个可点击展开与收缩的左侧纵向二级导航菜单是常见的需求，尤其在网页设计和前端开发中。这种菜单设计能够有效地组织和展示网站的层级结构，提高用户体验，便于用户快速找到所需信息。下面我们将...
竖向二级折叠导航菜单(只展开一个)
06-05
本文将深入探讨“竖向二级折叠导航菜单（只展开一个）”这一主题，这是一种常见的网页布局策略，旨在优化用户体验，尤其是在移动设备上。 首先，我们要理解“竖向二级”这一概念。竖向导航菜单是指菜单项沿着页面的...
js二级滑动展开菜单导航
06-05
在JavaScript编程领域，二级滑动展开菜单导航是一种常见的交互设计，尤其适用于网页和应用程序的侧边栏导航。这种设计能够有效地组织和展示大量的链接或功能，使得用户可以方便地访问多级内容。以下是对"js二级滑动...
jQuery后台页面左侧竖直二级导航栏特效代码
03-20
本资源"jQuery后台页面左侧竖直二级导航栏特效代码"正是利用jQuery的强大功能来实现后台管理界面中的一个关键组件：二级垂直导航栏。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”，通过简洁的语法...
纯CSS二级导航菜单
12-21
此源码内容为纯css打造绿色横向二级导航菜单代码，去IE6的BUG
QT二级菜单
12-20
此工程文件包含了菜单以及二级菜单，托盘，样式，好友列表，窗口等基本操作；欢迎关注我博客:http://blog.youkuaiyun.com/ly305750665/article/details/53749781
qt 制作的可以左右滑动的导航栏
06-06
使用qt代码实现导航栏的动态左右滑动效果，代码简单易懂。
QT界面框架（滑动导航条+伸缩菜单）
06-04
卤煮仿照Word写的滑动导航条和伸缩菜单。大家有需要可以多多参考！
Ｑｔ实现自定义树状导航栏
12-07
包括实现文件、基本配置文件、和简单的图片，使用Ｑｔ模型视图委托方法进行实现树状导航栏，重要地方都已经加了注释，可以看看我的博客里面介绍了实现
发送验证码、导航栏二级菜单的展开效果、导航栏吸附效果、页面拖动效果、APP下拉刷新效果
WW_998的博客
07-03 289
发送验证码 实现手机发送验证码，并进行倒计时，随后可重新发送验证码等功能。 建立以下原型，借助动态面板来实现持续性时间倒计时，将动态面板命名为“循环面板”，里面至少俩状态。 2.设置“发送验证码”按钮的交互效果并添加一个全局变量X，使动态面板每秒钟切换一次状态 （橙色箭头所指条件起到启用禁用的作用，也就是当该按钮显示剩余X秒时，单击不会起作用而重新计时） 3.设置动态面板的交互效果：【状态改变时】—【设置文本】，使“发送验证码”按钮的文本变为“剩余X秒” （启用条件判断，就不会倒数到负数，
flex布局二级导航栏
钱辉
09-09 2583
【Flex 布局教程：语法篇】 本文链接： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局出现的意义： 在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列，可以更加简便、完整、响应式地实现各种页面布局。 为什么我............
CSS（浮动）制作二级导航栏
weixin_71393275的博客
07-17 848
二级导航栏思路，1.在默认状态下，使用display：none；将二级菜单隐藏，获取li标签属性使用hover display：block将其显示（没有使用定位）（多多支持作者大大！
【html+css（大作业）】二级菜单导航栏
最新发布
2301_79982543的博客
05-27 2301
hello，hello好久不见！
html+css二级导航栏展开式在内容区上方
04-04
您可以使用CSS的定位属性将二级导航栏定位在内容区的上方。具体来说，您可以将二级导航栏的position属性设置为absolute，并将其top属性设置为内容区的底部。例如： ``` .navbar { position: relative; } .subnav ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值