包含菜单以显示点击过渡时的堆叠div

时间:2013-12-27 03:10:02

标签: jquery html menu z-index

使用this fiddle中的技术,如何获得指向堆叠div的列表项,以便在点击后将链接的div置于焦点(带有转换)?

我希望结合某人的jsfiddle,每次选择菜单项时都会在静态页面上显示转换。

我的示例使用切换菜单。一旦打开,我希望单击列表项以显示它指向的div以及转换。我的CSS布局很好,我知道div是堆叠的,因为当我选择底部div并给它显示none时,它下面的div框(以绿色着色)显示出来。

以下是我的代码:

<div id="maincontainer">
<nav id="sidebar-flex">
  <div id="menu">  
    <ul>
        <li><a href="#content1">The Journey</a>
        </li>
        <li><a href="#content2">The Pain of Infertility</a>
        </li>
        <li><a>India's Growing Insustry</a>
        </li>
        <li><a>Fertility Hights and Lows</a>
        </li>
        <li><a>The Income Gap</a>
        </li>
    </ul>
  </div>    
</nav>
<div id="contentwrap">

    <div id="header-flex"> <span id="button-flex"></span></div>
      <div id="content1">
            <h1>Amazingly simple off canvas navigation</h1>

            <h2>with Flexbox & toogleClass</h2>
    </div>

    <div id="content2">
            <h1>Amazingly simple off canvas navigation</h1>

            <h2>with Flexbox & toogleClass</h2>
    </div>
</div>        

这是我的(分叉和修改过的)jsfiddle: http://jsfiddle.net/hiimmike/RG7c2/2/

这里是jsfiddle(我分叉)的链接,我想要应用于我的布局: http://jsfiddle.net/hiimmike/kDYD9/

感谢任何帮助。谢谢!

0 个答案:

没有答案
豫ICP备18024241号-1