这个的菜单,花了几天下班的时间.把它作为CSS入门作吧.
本博客所写的菜单，并不是一次成形的，制作过程中改了好几次。初衷是要实现一种统一、方便生成菜单的方式，成果基本达到初衷的要求。
代码依赖jquery,使用jqery选择元素和绑定事件实在方便.
作者:pcenshao
转载请注明来自:
http://blog.csdn.net/pywepe
http://no-ca-dev.taobao.com/
下面描述代码：
.h-menu{} 横向菜单
.v-menu{} 纵向菜单,尚未实现
.up-menu{} 上弹菜单,尚未实现,较困难
.down-menu{} 下弹菜单
.left-menu{} 左弹菜单
.right-menu{} 右弹菜单
以上class都用作修饰UL,上一张效果图
代码:
<!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>无标题文档</title>
<style type="text/css">
#container{
width:900px;
border-width:1px;
border-color:red;
border-style:dotted;
margin:0 auto;
min-height:600px;
}
#header{
height:30px;
border-bottom-style:solid;
border-bottom-color:black;
border-bottom-width:1px;
margin-top:0;
}
#main{
height:500px;
}
#footer{
height:30px;
border-top-color:black;
border-top-style:solid;
border-top-width:1px;
}
.h-menu{ /* 指示ul为横向菜单 */
margin-top:0;
list-style:none;
}
.h-menu li{
float:left;
margin-left:50px;
padding-left:5px;
padding-right:5px;
padding-top:3px;
padding-bottom:3px;
width:50px;
position:relative;
}
.h-menu li:hover{
background-color:#bed742;
}
.h-menu li a{
text-decoration:none;
}
.v-menu{
}
.up-menu{
}
.down-menu{
list-style:none;
margin-top:0;
position:absolute;
padding-left:0;
left:0;
display:none;
}
.down-menu li{
width:100px;
position:relative;
margin-left:0;
}
.right-menu{
list-style:none;
margin-top:0;
padding-left:0;
top:0;
left:110px;
position:absolute;
display:none;
}
.right-menu li{
width:100px;
margin-left:0;
position:relative;
}
.left-menu{
list-style:none;
margin-top:0;
padding-left:0;
top:0;
left:-110px;
position:absolute;
display:none;
width:110px;
}
.left-menu li{
width:100px;
margin-left:0;
position:relative;
}
ul{
background-color:#afb4db;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function(){
$(".h-menu > li,.down-menu > li,.left-menu > li,.right-menu > li").each(function(){ // .h-menu的子一级li
$(this).bind("mouseover",function(){
$(this).children("ul").show(); // li的子一级ul
});
$(this).bind("mouseout",function(){
$(this).children("ul").hide();
});
});
});
</script>
</head>
<body>
<div id="container" >
<div id="header">
<ul class="h-menu">
<li style="width:100px;">
<a href="#" >江西省</a>
<ul class="down-menu">
<li>
<a href="#" >南昌市</a>
<ul class="right-menu">
<li><a href="#" >八一广场</a></li>
<li><a href="#" >洪都大道</a></li>
<li><a href="#" >滕王阁</a></li>
</ul>
</li>
<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>
<li>
<a href="#" >赣州市</a>
<ul class="right-menu">
<li><a href="#" >钨都赣州</a></li>
<li><a href="#" >红都瑞金</a></li>
<li>
<a href="#" >橙乡信丰</a>
<ul class="right-menu" >
<li style="width:120px;"><a href="#" >香甜的脐橙</a></li>
<li style="width:120px;"><a href="#" >清澈的桃江</a></li>
<li style="width:120px;"><a href="#" >悠久的大圣寺塔</a></li>
</ul>
</li>
<li><a href="#" >龙南</a></li>
<li><a href="#" >定南</a></li>
<li><a href="#" >全南</a></li>
</ul>
</li>
</ul>
</li>
<li style="width:100px;" >
<a href="#" >福建省</a>
<ul class="down-menu">
<li><a href="#" >福州市</a></li>
<li>
<a href="#" >厦门市</a>
<ul class="right-menu">
<li><a href="#" >鼓浪屿</a></li>
<li><a href="#" >中山路步行街</a></li>
<li><a href="#" >圆博苑</a></li>
</ul>
</li>
<li><a href="#" >漳州市</a></li>
<li><a href="#" >泉州市</a></li>
<li><a href="#" >三明市</a></li>
</ul>
</li>
<li style="width:100px;" >
<a href="#" >广东省</a>
<ul class="down-menu">
<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>
<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>
<li><a href="#" >南雄市</a></li>
<li><a href="#" >中山市</a></li>
<li><a href="#" >潮州市</a></li>
</ul>
</li>
<li style="width:100px;">
<a href="#" >浙江省</a>
<ul class="down-menu">
<li>
<a href="#" >杭州市</a>
<ul class="left-menu">
<li>
<a href="#" >西湖美景</a>
<ul class="left-menu">
<li><a href="#" >传说当年</a></li>
<li><a href="#" >有一个人物</a></li>
</ul>
</li>
<li><a href="#" >下有苏杭</a></li>
<li><a href="#" >美女如云</a></li>
<li><a href="#" >阿里巴巴</a></li>
</ul>
</li>
<li><a href="#" >温州市</a></li>
<li><a href="#" >金华市</a></li>
<li><a href="#" >钱唐江市</a></li>
</ul>
</li>
</ul>
</div> <!-- header -->
<h2>横向菜单、纵向菜单、左弹菜单、右弹菜单通用CSS、Javascript代码</h3>
<div id="main"></div><!-- main -->
<div id="footer">
<!-- up-menu -->
</div><!-- footer -->
</div> <!-- container -->
</body>
</html>
经典 计算机 二手书
http://pcenshao.taobao.com
- 大小: 10.6 KB
- 大小: 6.6 KB
分享到：
相关推荐
网页菜单制作工具是一款高效实用的软件，专为简化和加速Web开发中的菜单设计过程而设计。这款绿色版意味着它无需安装，可以直接运行，方便快捷，节省了用户的时间和磁盘空间。通过使用这款工具，开发者可以迅速创建...
春天网页菜单制作工具是一款专为网页设计师和开发者设计的高效软件，它简化了网页导航菜单的创建过程，使用户能够快速、便捷地制作出专业且吸引人的网页菜单。这款工具通常包含一系列预设模板、自定义选项以及可视化...
在网页菜单制作工具中，JS菜单提供了许多优点。首先，它们能够响应用户的操作，例如鼠标悬停、点击等，展示下拉子菜单或执行特定功能。其次，JS菜单可以通过动画效果提升用户体验，如淡入淡出、滑动等，使得用户界面...
[HTML.Javascript网页菜单制作软件]AllWebMenus.Pro.5.3.856.
在制作网页菜单时，HTML主要通过`<ul>`（无序列表）和`<li>`（列表项）元素来创建菜单的框架。例如，一个简单的水平菜单可能如下所示： ```html <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> ...
网页菜单制作软件 js工具 [HTML.Javascript网页菜单制作软件].AllWebMenus.Pro.5.3.854
网页菜单是一款用于制作网页菜单和导航栏的实用工具。是专为个人网站站长、网页设计师、策划者定制的方便易用、所见即所得的设计工具。 <br>软件功能描述： 1.支持鼠标移入移出效果切换 2.支持制作右键弹出...
你是不是还在为制作网页的菜单发愁啊，你是不是还在因为做菜单然后去网上找资料最后修改，但是不是自己想要的效果，呵呵，那么这个工具就会帮你生成你想要的菜单，这个工具是一个网页形式的，是工具形式的，是 一个...
1. UltraMenu：一款国外的准flash菜单制作工具，用JS及CSS模拟Flash菜单效果，软件自带数十个模板，比较实用。 2. 123Flash Menu：AntsSoft公司推出的flash菜单制作工具，自带不少模板，由HAWARK STUDIO汉化。不得...
使用**CSS网页菜单制作小工具**，你可以实现以下功能： 1. **样式选择**：工具通常包含多种预设的菜单样式，如横向、垂直、下拉或折叠式菜单，用户可以根据自己的喜好和网站设计选择合适的样式。 2. **颜色定制**：...
网页菜单的制作是网站设计中的重要一环，它为用户提供了一种直观且高效的方式来浏览和导航网站内容。本文将深入探讨如何使用特定的软件来直接开发网页菜单，并生成相应的脚本和HTML代码。 首先，我们要了解网页菜单...
网页菜单制作工具是一种专为美工设计师打造的实用软件，旨在简化网页菜单栏的设计过程，提高工作效率。在网页设计中，菜单是用户导航网站的重要元素，它的设计与功能直接影响到用户体验。这款工具提供了丰富的功能和...
"春天网页菜单"工具就是专为设计师们打造的一款高效解决方案，旨在帮助他们轻松制作出各种风格的网页菜单。这款工具的特点在于其便捷性和多样性，能够快速生成美观且功能齐全的菜单，提升网站的整体用户体验。 1. *...
在网页设计和开发中，Java是一种广泛使用的编程语言，尤其在构建动态交互式的网页菜单方面。Java通过JavaScript库，如jQuery或自定义的Java Servlets，可以实现丰富的用户界面和功能强大的后台处理。本篇文章将深入...
#### 一、网页设计与制作概览 - **适用对象**: 主要面向大学生，尤其是计算机或相关专业学生，用于完成期末网页设计作业。 - **设计范围**: 包含了广泛的主题，如个人、美食、公司、学校、旅游、电商等，几乎覆盖了...
总的来说，魔法菜单是一种简化网页菜单制作过程的有效工具，通过它可以快速创建出专业且具有吸引力的交互式菜单，提高网站的用户友好性和功能性。同时，掌握如何利用这样的工具也是现代网页开发者必备的技能之一。
"WizHtmlEditor"可能是这个单HTML网页制作工具的名称，它可能包含了丰富的内置元素库，例如按钮、表单、导航菜单等，用户只需选择并放置即可。这样的库极大地方便了非专业开发者，减少了寻找和创建这些元素的时间。...
总结，制作网页特效下拉菜单涉及到HTML、CSS和JavaScript的综合运用。理解这些基础技术和交互原理，可以帮助开发者创建出更加美观、易用的网站导航菜单。通过不断实践和优化，可以打造出适应不同场景、满足多样化...
在网页设计中，JavaScript可以用来添加如浮动菜单、滑动图片展示、点击效果等交互元素，使得“小猫咪”网页更加生动。使用库和框架如jQuery或React，可以简化开发过程并提高效率。 4. **响应式设计**：随着移动设备...