jquery css 主菜单样式的跳转-白红宇

jquery css 主菜单样式的跳转

阅读量：4644 次

发布时间：2019-06-09

本文共 1251 字，大约阅读时间需要 4 分钟。

想要实现的效果事实上是挺常见的那种：网页的主菜单一開始有一种默认的样式（如A样式），当鼠标经过某一菜单项时。此菜单项会套用一种样式（如B样式），当鼠标点击某一菜单项时。当前菜单项会套用B样式，其余菜单项会去掉B样式而套用默认的A样式。经过尝试，写出了比較简单的代码，存下来，以备后用。

原文件下载：

html代码：


         	
                  
       Home
            
       Download
            
       Documentation
            
       Community
            
       Success Stories
            
       News
             
       Events
            
       About

css代码：

#menuBar{	clear:both;	width:1200px;	margin:0 auto;	color:#efefef;	font-family:Arial;	font-size:18px;}#menuBar ul{	list-style:none;	height:55px;	margin:0px;	padding:0px;}.beforeClick{	float:left;	width:150px;	text-align:center;	line-height:55px;	height:55px;	background-image:url(Welcome%20to%20Python.org_files/20141021190636.png);	background-repeat:repeat-x;	margin-top:10px;}.beforeClick:hover{		background-color:3776ab;	border:1px solid #aaa;	height:53px;	line-height:53px;	width:148px;	background-image:none;	cursor:pointer;}.clickedMenu{	background-color:3776ab;	border:1px solid #aaa;	height:53px;	line-height:53px;	width:148px;	background-image:none;	cursor:pointer;	}

js代码：

效果图：

1、初始状态：

2、鼠标经过某一菜单项时的状态：

3、鼠标点击某一菜单后，而且鼠标经过其他菜单项时的状态：

3、当再次点击其他菜单时，样式继续发生变化：

转载于:https://www.cnblogs.com/zfyouxi/p/5370892.html

你可能感兴趣的文章