返回淡出淡入、 从......登陆

淡出淡入、 从下往上滑动、从右到左滑动

恋姣???2019-06-17 15:23:35197

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>支持php中文网</title>

<link rel="shortcut icon" type="images/x-icon" href="http://www.php.cn/static/images/logo.png" /> <!-- 设置网页头部的logo -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<style type="text/css">

*{padding:0px;margin:0px;background:#ccc; }

.main{ width:100%;height:60px; background:#000;}

.logo a{background:url(http://www.php.cn/static/images/logo.png) no-repeat center center; width:140px;height:60px; display:block; background-size:100%; float:left;}

ul li{ list-style:none; width:96px; height:60px; float:left;background:#000; line-height:60px;text-align:center;}

ul li a{text-decoration:none; color:#ccc; background:#000;}

ul li a:hover{background:#000; border-bottom:2px #0C0 solid;}

.nav{ color:#fff; width:96px;height:180px;}

.nav li{ border-bottom:1px solid #ccc; }

.nav2{ color:#fff; width:96px;height:180px;}

.nav2 li{ border-bottom:1px solid #ccc; }

.nav3{ color:#fff; width:96px;height:180px;}

.nav3 li{ border-bottom:1px solid #ccc; }

</style>

<script type="text/javascript">

$(document).ready(function() {

$('.nav').hide();

$('.nav2').hide();

$('.nav3').hide();

    $('#bt').on('click',function(){

$('.nav').animate({height:'toggle'},1500)

})

  $('#bt2').on('click',function(){

$('.nav2').fadeToggle(3000);

})

$('#bt3').on('click',function(){

$('.nav3').animate({width:'toggle'},1500);

})

});


</script>

</head>


<body>

<div class="main">

<div class="logo"><a href="#"></a></div>

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">视频教程</a></li>

<li><a href="#">社区问答</a></li>

<li><a href="#" id="bt">技术文章↓</a>

<div class="nav">

<ul>

<li><a href="#">php教程</a></li>

<li><a href="#">html教程</a></li>

<li><a href="#">JQuery</a></li>

</ul>

</div>

</li>

<li><a href="#">编程词典</a></li>

<li><a href="#" id="bt2">资源下载↓</a>

<div class="nav2">

<ul>

<li><a href="#">php教程</a></li>

<li><a href="#">html教程</a></li>

<li><a href="#">JQuery</a></li>

</ul>

</div>

</li>

<li><a href="#" id="bt3">特色课程↓</a>

<div class="nav3">

<ul>

<li><a href="#">php教程</a></li>

<li><a href="#">html教程</a></li>

<li><a href="#">JQuery</a></li>

</ul>

</li>

<li><a href="#">菜鸟学堂</a></li>

</ul>

</div>




</body>

</html>



最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网