JS实现的简洁二级导航菜单雏形效果

2024-11-27 12:12:27

本文实例讲述了JS实现的简洁二级导航菜单雏形效果。分享给大家供大家参考。具体如下：

这是一个二级导航菜单雏形，风格简洁，圆角形，也是当前比较流行的菜单效果，支持二级，演示内容是随便搞的，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/

具体代码如下：

<!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>
<title>二级导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
.ttl{height:18px;}
.ctt{
height:auto;
padding:6px;
clear:both;
border: 1px solid #CCCCCC;
}
.w936{
width:936px;
clear:both;
height: 120px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
}
.normaltab {
color:#1F3A87;
}
.hovertab {
color:#FF0000;
background-color: #99CC00;
}
.dis{display:block;}
.undis{display:none;}
.tabs {
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
.tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
cursor: pointer;
}
.tabs a {
float:left;
background:url("images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("images/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
.tabs a span {float:none;}
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=8;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
}
//-->
</script>
</head>
<body>
<div class="w936">
 <div id="tb_" class="tb_ tabs">
  <ul>
   <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>ASP</span></a></li>
   <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>PHP</span></a></li>
   <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>.NET</span></a></li>
   <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>JSP</span></a></li>
   <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>JAVA</span></a></li>
   <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>DELPHI</span></a></li>
   <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>VC++</span></a></li>
   <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>AJAX</span></a></li>
  </ul>
 </div>
 <div class="ctt">
  <div class="dis" id="tbc_01">ASP的内容一</div>
  <div class="undis" id="tbc_02">PHP的内容二</div>
  <div class="undis" id="tbc_03">.NET的内容三</div>
  <div class="undis" id="tbc_04">JSP的内容四</div>
  <div class="undis" id="tbc_05">JAVA的内容五</div>
  <div class="undis" id="tbc_06">DELPHI的内容六</div>
  <div class="undis" id="tbc_07">VC++的内容七</div>
  <div class="undis" id="tbc_08">AJAX的内容</div>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JavaScript实现简单的二级导航菜单实例

本文实例讲述了JavaScript实现简单的二级导航菜单的方法.分享给大家供大家参考.具体如下: <!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" la
js实现的黑背景灰色二级导航菜单效果代码

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如
js实现二级导航功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{text-decoration: none;} *{margin: 0;padding: 0;box-sizing: border-box;font-family: &quo
基于dropdown.js实现的两款美观大气的二级导航菜单

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
JS实现黑色大气的二级导航菜单效果

本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
JS实现仿京东淘宝竖排二级导航

代码很简单,就不多废话了,直接奉上代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="
JS+CSS实现精美的二级导航效果代码

本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm
以JavaScript来实现WordPress中的二级导航菜单的方法

导航菜单导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示既
js实现横向伸展开的二级导航菜单代码

本文实例讲述了js实现横向伸展开的二级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款js实现的横向伸展开二级导航菜单,鼠标放在一级菜单的第四个菜单项上,就能展开二级的菜单,菜单没有过多美化,只是一般的修饰,使用的朋友可根据您自己的网站风格重新美化菜单风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
JS实现的简洁二级导航菜单雏形效果

本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
Jquery实现带动画效果的经典二级导航菜单

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name
jQuery实现简洁的导航菜单效果

本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem indexNavItem&
jQuery+css实现的蓝色水平二级导航菜单效果代码

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
jQuery实现二级导航菜单的示例

实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航菜单案例</title> <style> *{ padding: 0; margin: 0; } ul,li{ l

JS实现的简洁二级导航菜单雏形效果

相关推荐

随机推荐