首页>案例集

CSS3案例集12:响应式布局初体验!(更新移动端导航菜单)

一个月的ps基础课程教学终于结束,网站也好久没有更新了,今天学生们准备项目汇报的作品,我忙里偷闲赶紧来更新一下。

响应式布局几乎是现在网页设计的标配,能在不同的屏幕宽度下显示不同的效果,而不用准备不同的html和css版本,还是非常不错的。

利用媒体查询media queries可以很好的实现这个效果。

这个案例是仿了网易轻量博客lofter的一个页面,很简单实用。不过移动端的导航菜单没有做,个人网站改版的时候加上了移动端导航菜单的效果。

ps:已经更新了移动端导航菜单的效果,改变浏览器窗口可以看到菜单的变化。

不断改变浏览器窗口,可以看到页面的变化。

响应式布局效果展示.gif

查看案例

下载案例

链接:https://pan.baidu.com/s/1ggoQQuZ 密码:pxuz

一、案例知识点

1、百分比布局

2、media queries的应用

3、移动端导航菜单的制作

二、HTML源代码

<header>
	<div id="top" class="clearfix">
        <div id="logo" class="fl"><img src="images/logo.png"></div>
        <div id="mobile-menu" class="fr"><span></span></div>
        <nav class="menu fl">	
            <ul class="clearfix">
            	<li><a href="#">首页</a> / </li>
                <li><a href="#">联系</a> / </li>
                <li><a href="#">归档</a> / </li>
                <li><a href="#">提问</a> / </li>
                <li><a href="#">RSS</a></li>
            </ul>
        </nav>
    </div>
</header>
<main>
   <div id="products">
    	<ul class="clearfix">
         <li><a href="#"><img src="images/1.jpg" /></a></li>
         <li><a href="#"><img src="images/2.jpg" /></a></li>
         ……
      </ul>
 </div>
</main>

三、主要的CSS代码

#top{
	padding-left:2%;
	min-height:50px;}
#logo{
	width:30%;}
#logo img{
	width:100%;
	min-width:135px;}
#mobile-menu{
	display:none;}
.menu{
	margin-top:3%;}
.menu li{
	float:left;
	margin-right:0.5em;}
#products li{
	float:left;
	width:24.25%;
	margin-right:1%;
	margin-bottom:1%;}
#products li:nth-child(4n){
	margin-right:0;}
#products img{
	width:100%;}
#footer{
	padding:2% 1% 3%;}
#aboutme span{
	margin-top:2px;}


@media screen and (max-width:1024px){
#products li{
	width:32.66%;}
#products li:nth-child(4n){
	margin-right:1%;}
#products li:nth-child(3n){
	margin-right:0;}
#footer {
	font-size:0.875rem;}
	}
@media screen and (max-width:900px){
#aboutme,#copyright{
	float:none;
	margin-bottom:1%;}
	}
@media screen and (max-width:768px){
#top{
	position:relative;
	padding:1% 5% 1% 1%;}
#mobile-menu{
	display:block;
	margin-top:3%;
	}
#mobile-menu span{
	display:block;
	width:20px;
	height:14px;
	position:relative;
	}
#mobile-menu span::before,#mobile-menu span::after{
	content:"";
	display:block;
	width:20px;
	height:2px;
	background-color:#666;
	position:absolute;
	left:0;
	top:0;
	transition:all 0.2s linear;
	}
#mobile-menu span::after{
	bottom:0;
	top:auto;
	}
#mobile-menu.menu-rotate span::before{
	top:7px;
	transform:rotate(-45deg);
	
	}
#mobile-menu.menu-rotate span::after{
	top:7px;
	bottom:auto;
	transform:rotate(45deg);
	}
.menu{
	position:absolute;
	right:0;
	top:71.34px;
	display:none;
	background:rgba(0,0,0,.7);
	margin-top:0;
	width:100%;
	padding:2% 5%;}
.menu li{
	float:none;
	padding:0.5em 0;}
.menu a{
	color:#fff;}
	}
@media screen and (max-width:480px){
#products li{
	width:49.5%;}
#products li:nth-child(3n){
	margin-right:1%;}
#products li:nth-child(2n){
	margin-right:0;}
.menu{
	top:50px;}
#footer{
	font-size:0.75rem;}
	}

四、JavaScript代码

<script>
$(function(){
	$("#mobile-menu").click(function(){
		$(this).toggleClass("menu-rotate");
		$(".menu").slideToggle(500);
		})
	})
</script>

声明:坚持了三年的原创web前端教程网站,以为可以一直随心所欲的写下去。网站的虚拟主机和域名钱,一年大概二三百,我负担得起。可惜随着用户访问量的不断增加,阿里云每个月提供的免费流量已经不够了(用户访问网站,需要从阿里云服务器下载网页,要耗费阿里云主机的流量),需要我花钱从阿里云买流量,网站才能继续访问,这个钱一年至少一千多,我不想接广告,只能靠添加打赏插件和下载一些案例需要付费的方式补贴一点流量的钱。特此声明!

原创比抄袭难多了,请多多支持!
打赏

点赞


9
保存到:

相关文章

Top