当点击时在一个三维空间中替换当前内容的侧边
增加菜单上的视觉效果,我们推沿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>
.cd-nav-trigger
用于创建图标的菜单,一个.cd-section
包含网页页的主要内容一个.cd-section
主导航容器。0