2015-08-22 |

3D切换手机响应式侧边导航

当点击时在一个三维空间中替换当前内容的侧边

增加菜单上的视觉效果,我们推沿z轴的主要内容(通过使用CSS变换我们实际上削减内容的大小,我们不使用三维平移,但结果是一样的)。 创建html结构 的HTML结构中的3个主要元素:一个.cd-nav-trigger用于创建图标的菜单,一个.cd-section 包含网页页的主要内容一个.cd-section 主导航容器。
a href="#cd-nav" class="cd-nav-trigger">
	Menu<span><!-- used to create the menu icon --></span>
</a> <!-- .cd-nav-trigger -->
 
<main>
	<section class="cd-section index cd-selected">
		<header>
			<div class="cd-title">
				<h2><!--  标题放在这  --></h2>
				<p><!--   简介放在这  --></p>
			</div> <!-- .cd-title -->
		</header>
 
		<div class="cd-content">
			<!-- your content here -->
		</div>
	</section> <!-- .cd-section -->
</main>
 
<nav class="cd-nav-container" id="cd-nav">
	<header>
		<h3>Navigation</h3>
		<a href="#0" class="cd-close-nav">Close</a>
	</header>
 
	<ul class="cd-nav">
		<li class="cd-selected" data-menu="index">
			<a href="index.html">
				<span>
					<!-- 图标放在这 -->
				</span>
 
				<em><!-- 图标文字  --></em>
			</a>
		</li>
 
		<li data-menu="projects">
			<!-- .... -->
		</li>
 
		<!-- other list items here -->
	</ul> <!-- .cd-3d-nav -->
</nav>
 
今天的资源是一个强大的方法来显示一个网站导航。记住,虽然,它不必是“主”导航。例如,你可以有一个产品画廊,你想创造一个平稳过渡,同时从一个产品类别切换到另一个。
增加菜单上的视觉效果,我们推沿z轴的主要内容(通过使用CSS变换我们实际上削减内容的大小,我们不使用三维平移,但结果是一样的)。
有趣的一点:当你选择一个新的类别,我们切换的内容在背景中,然后将其移动到原来的位置,隐藏导航。

创建html结构

的HTML结构中的3个主要元素:一.cd-nav-trigger用于创建图标的菜单,一个.cd-section  包含网页页的主要内容一个.cd-section 主导航容器。

0

  • 上一篇:没有了

发表评论

    评价:
    验证码: 点击我更换图片