Heim > Web-Frontend > HTML-Tutorial > CSS3单页面垂直固定导航_html/css_WEB-ITnose

CSS3单页面垂直固定导航_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 11:29:48
Original
1663 Leute haben es durchsucht

越来越多的开发者喜欢将单页面尤其像产品介绍页面设计成用一个简单的导航条关联的页面各个重要部分(节点)。本例中,一个页面由多个重要节点组成,在页面一侧会垂直展示多个简单的导航远点,滑上圆点会展示对应节点部分的名称,点击页面会滚动到对应的节点部分,而导航条位置固定不变。

查看演示 下载源码

当屏幕足够小时(如手机移动设备),会在屏幕右下角展示一个图标,触控图标,则会展开导航菜单,点击菜单页面会滚动到对应的节点,效果非常酷。

HTML

我们的导航条是一个无序列表ul,包含在nav.cd-vertical-nav内,通过连接a#section1关联到对应的节点。元素button.cd-nav-trigger是用来作为小屏幕设备上的用来触发菜单的按钮。section.cd-section就是用来对应导航节点的内容。

<nav class="cd-vertical-nav">	<ul>		<li><a href="#section1" class="active"><span class="label">Intro</span></a></li>		<li><a href="#section2"><span class="label">Events</span></a></li>		<!-- additional navigation items here -->	</ul></nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="section1" class="cd-section">	<div class="content-wrapper">		<h1>垂直固定导航</h1>		<a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a>	</div></section> <section id="section2" class="cd-section">	<div class="content-wrapper">		<!-- section content here -->	</div></section>
Nach dem Login kopieren

CSS

HTML结构部署好后,我们要为页面添加必要的CSS样式。在非常小的屏幕下(视图宽度小于800px),我们将.cd-nav-trigger和

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage