利用jQuery实现jDropDown下拉菜单



58 231 78



特效描述:利用jQuery实现 jDropDown 下拉菜单,利用jQuery实现jDropDown下拉菜单

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/dropdown.class.demo.js"></script>
<script type="text/javascript" language="javascript" src="js/layout.class.js"></script>

3. HTML代码

<div id="page-wrap">
	<!-- layout -->
	<div class="layout">
		<!-- logo -->
		<img src="img/logoandrei.png" alt="jQuery jDropDowns" class="logo" />
		<!-- jDropDown menu -->
		<ul id="jDropDown" class="blue">
			<li class="home"><a href="#">
			<img src="img/homeIcon.png" alt="home"></a></li>
			<li><a href="#">Home page</a>
			<div class="column_2" style="margin-left: 4px;">
				<div class="column">
					<img src="img/about.jpg" alt="about us" style="margin: 20px 0px 0px 10px;" />
					<ul>
						<li><a href="#">About us</a></li>
						<li><a href="#">Documentation</a></li>
						<li><a href="#">Copyright issues</a></li>
					</ul>
				</div>
				<ul class="column">
					<li><a href="#">Lorem ipsum text</a></li>
					<li><a href="#">Dorem sid amed ipsum est</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Succidere est vita lorem</a></li>
					<li><a href="#">Texting lorem ipsum</a></li>
					<li><a href="#">Sid amet dorem upset</a></li>
					<li><a href="#">Lorem ipsum text</a></li>
				</ul>
			</div>
			</li>
			<li><a href="#">Dropdown menu with image </a>
			<div class="column_3" style="margin-left: 4px;">
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
			</div>
			</li>
			<li><a href="#">Dropdown with text</a>
			<div class="column_3" style="margin-left: -170px;">
				<div class="column grey">
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/telphone.png" width="150" alt="about us" style="margin: 0px auto;" />
				</div>
			</div>
			</li>
			<li><a href="#">About with right align</a>
			<div class="column_3" style="margin-left: -327px;">
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
			</div>
			</li>
			<li><a href="#">Simple contact</a>
			<div class="column_2" style="margin-left: -202px;">
				<div class="column">
					<span class="sectionTitle">We on map</span>
					<img alt="Google Static Map Embed" src="http://maps.google.com/maps/api/staticmap?size=150x120&maptype=roadmap&markers=size:mid|color:red|San+Francisco,CA|Oakland,CA|San+Jose,CA&sensor=false" style="margin-top: 10px;">
				</div>
				<div class="column">
					<img src="img/contact.jpg" alt="contact us" style="float: right;" />
					<div class="contact">
						<p>Name : Lorem Ipsum</p>
						<p>Adress: Rue 25 , Russia</p>
						<p>Phone : 012 254 144</p>
						<p>E-mail : name@company.com</p>
					</div>
				</div>
			</div>
			</li>
		</ul>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 二级导航菜单 下拉导航菜单 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 导航菜单导航条

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到