jQuery手机版下拉分类菜单筛选特效代码下载


jQuery手机版下拉分类菜单筛选特效代码下载
jQuery手机版下拉分类菜单筛选特效代码下载以及手机版、下拉分类、菜单筛选等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/menudown.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/menudown.js" ></script>

3. HTML代码

		<dl class="topmenu">
			<dt>
				<div class="selectlist">
					<div class="select_textdiv">
						<input type="hidden" value=""/>
						<p class="s_text">附近</p><span class="down"><img src="img/down (1).png"></span>
					</div>
					<div class="select_textul">
						<ul class="select_first_ul">
							<li class="focus">
								<p>附近</p>
								<ul class="select_second_ul" style="display: block;">
									<li>附近(智能范围)</li>
									<li>500</li>
									<li>1000</li>
									<li>1500</li>
									<li>2000</li>
								</ul>
							</li>
							<li>
								<p>热门商城</p>
								<ul class="select_second_ul">
									<li>全部商城</li>
									<li>市中心区</li>
									<li>华侨城</li>
									<li>海岸城</li>
									<li>蛇口</li>
								</ul>
							</li>
							<li>
								<p>福田区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li>
							<li>
								<p>光明新区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li>
							<li>
								<p>龙岗区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li>
							<li>
								<p>福田区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li>
							<li>
								<p>宝安区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li><li>
								<p>罗湖区</p>
								<ul class="select_second_ul">
									<li>全部南山区</li>
									<li>华侨城</li>
									<li>蛇口</li>
									<li>南头</li>
									<li>南头中心区</li>
									<li>南油</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>	
			</dt>
			<dt>
				<div class="selectlist">
					<div class="select_textdiv">
						<input type="hidden" value=""/>
						<p class="s_text">智能排序</p><span class="down"><img src="img/down (1).png"></span>
					</div>
					<div class="select_textul">
						<ul class="select_first_ul">
							<li class="focus">
								<p>智能排序</p>
								<ul class="select_second_ul" style="display: block;">
									<li>离我最近</li>
									<li>人气最高</li>
									<li>评价最好</li>
									<li>口味最佳</li>
									<li>环境最佳</li>
								</ul>
							</li>
							<li>
								<p>热门商城</p>
								<ul class="select_second_ul">
									<li>全部商城</li>
									<li>市中心区</li>
									<li>华侨城</li>
									<li>海岸城</li>
									<li>蛇口</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>	
			</dt>
			<dt>
				<div class="selectlist">
					<div class="select_textdiv">
						<input type="hidden" value=""/>
						<p class="s_text">美食</p><span class="down"><img src="img/down (1).png"></span>
					</div>
					<div class="select_textul">
						<ul class="select_first_ul">
							<li>
								<p>西餐</p>
							</li>
							<li>
								<p>中餐</p>
							</li>
						</ul>
					</div>
				</div>	
			</dt>
		</dl>

相关推荐

发表评论

相关文章