自适应点击顶部导航左侧划出案例一

最新推荐文章于 2023-07-17 00:30:00 发布

江三好

最新推荐文章于 2023-07-17 00:30:00 发布

阅读量148

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44006570/article/details/106646536

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="Author" content="LS">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta content="telephone=no" name="format-detection" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0">
	<script src="http://www.wfyxb.cn/templets/wfyxbcn1508/js/jquery1.42.min.js"></script>


	
    <style type="text/css">
         *html{background-attachment:fixed;overflow-x:hidden} 
        body{margin:0;padding:0;font:12px 'Microsoft YaHei';overflow-x:hidden;background-attachment:scroll;-webkit-text-size-adjust:none;background:#fff;}
        div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,hr,pre,form,fieldset,input,textarea,blockquote,p{padding:0;margin:0}
        hr{margin:0 auto}
        table,td,tr,th{font-size:12px}
        li{list-style-type:none}
        img{border:0;cursor:pointer}
        ol,ul{list-style:none}
        h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
        address,cite,code,em,th{font-weight:normal;font-style:normal}
        a{text-decoration:none;outline:none;cursor:pointer}
        a:hover{text-decoration:underline}
        textarea{font-size:12px;line-height:20px}


		.top{ width:100%; height:50px; background:#645244; margin:0 auto; position:relative;}
		.top .open{ position:absolute; top:9px; right:20px; color:#fff; border:2px solid #fff; border-radius:50%;-webkit-border-radius:50%; padding:6px 3px; font-size:12px;}
		.menu{ width:100%; height:100%; background:#2e3642; position:absolute;top:0; left:0px; color:#fff; overflow:hidden; margin-left:-100%;}
		.menu .line{ width:100%; height:50px; margin:0 auto;}
		.menu .line h2{ font-size:20px; line-height:50px; text-indent:15px;}
		.menu .close{ float:right; position:absolute; top:9px; right:20px; border:2px solid #fff; border-radius:50%;-webkit-border-radius:50%; padding:6px 3px; font-size:12px;}
		.menu .father{ width:100%; float:left;}
		.father h2{ width:30%; float:left; text-indent:15px; height:40px; line-height:40px; font-size:16px;}
		.father h2.on{ background:#3f4754;}
		.father ul{ width:70%; height:100%; position:absolute; top:50px; left:30%; background:#3f4754; display:none; font-size:14px; color:#93a0b2;}
		.father ul.on{ display:block;}
		.father ul li{ margin:0 10%; width:80%; height:50px; line-height:50px; border-bottom:1px solid #525c6b; }
		.father ul li:last-child{ border-bottom:0;}
    </style>
</head>
<body>

<script type="text/javascript">
$(function(){
	$(".open").click(function(){
		$(".menu").show(100,showMenu);
	}),$(".close").click(function(){
		$(".menu").show(100,hideMenu);
	});
	$(".father").click(function(){
		$(".father").children().removeClass("on");
		$(this).children().addClass("on");
	});
});

function showMenu()
{
	$(".menu").animate({marginLeft:"0"});
}
function hideMenu()
{
	$(".menu").animate({marginLeft:"-100%"});
}
</script>



<div class="top"><span class="open">导航</span></div>
<div class="menu">
	<div class="line">
		<h2>网站导航</h2>
		<div class="close">关闭</div>
	</div>
	
	<div class="father">
		<h2 class="on">父栏目1</h2>
		<ul class="on">
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
			<li>11111111</li>
		</ul>
	</div>
	<div class="father">
		<h2>父栏目2</h2>
		<ul>
			<li>2222222</li>
			<li>2222222</li>
			<li>2222222</li>
			<li>2222222</li>
			<li>2222222</li>
		</ul>
	</div>
	<div class="father">
		<h2>父栏目3</h2>
		<ul>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
			<li>3333</li>
		</ul>
	</div>
	<div class="father">
		<h2>父栏目4</h2>
		<ul>
			<li>444444</li>
			<li>444444</li>
			<li>444444</li>
			<li>444444</li>
			<li>444444</li>
		</ul>
	</div>
	<div class="father">
		<h2>父栏目5</h2>
		<ul>
			<li>55555555</li>
			<li>55555555</li>
			<li>55555555</li>
			<li>55555555</li>
			<li>55555555</li>
		</ul>
	</div>
</div>
</body>
</html>

在这里插入图片描述

江三好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自适应点击顶部导航左侧划出案例一

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="Author" content="LS"> <meta name="apple-mobile-web-app-capable"
复制链接

扫一扫