使用jQuery开发iOS风格的页面导航菜单

日期:2012-7-28  来源:GBin1.com

使用jQuery开发iOS风格的页面导航菜单

在线演示  本地下载

iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航。

HTML代码

我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下:

<nav>

  <h1>导航菜单</h1>

  <ul>

    <li>

      <h2>专题教程</h2>

      <ul>

        <li>

          <h3>HTML专题教程</h3>

          <ul>

                 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a></li>

                 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a></li>

                 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a></li>

                 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc">GBin1专题之HTML5教程 - 第四篇:HTML5 Video Doc</a></li>

                 <li><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-audio">GBin1专题之HTML5教程 - 第五篇:HTML5 Audio元素</a></li>

            </ul>

        <li>

          <h3>GBin1热点秀</h3>

          <ul>

                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot1/">GBin1专题之Web热点秀#1</a>

                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot2/">GBin1专题之Web热点秀#2</a>

                <li><a href="http://www.gbin1.com/tutorials/hotspot/hotspot3/">GBin1专题之Web热点秀#3</a>

          </ul>



      </ul>

      。。。 。。。

Javascript

使用jQuery来查询遍历li,并且生成菜单项目,如下:

................

来源:使用jQuery开发iOS风格的页面导航菜单

你可能感兴趣的:(jquery)