javascript - 如何显示侧边栏菜单

Question

为我的网页使用 CSS 样式表。

我想在我的网页中使用侧边栏菜单。如果我点击菜单，子菜单的提升将显示在左侧。

HTML 代码。

<ul id="navlist">
      <li><a id="n1" href="">Home</a></li>
      <li><a id="n2" href="">News</a></li>
      <li><a id="n3" href="">Events</a></li>
      <li><a id="n4" href="">Reviews</a></li>
      <li><a id="n5" href="">Forum</a></li>
      <li><a id="n6" href="">Contact Us</a></li>
      <li><a id="n7" href="">Links</a></li>
</ul>

CSS 样式表代码。

#navlist{
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 27px;
    width: 777px;
    top: 225px;
}
#navlist li{
    display: inline;
    list-style-type: none;
}
#navlist a {
    padding: 3px 10px;
    background-image: url(images/button.gif);
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #fff;
    text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}
#leftside{
    float: left;
}
#leftside h3{
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 0px;
    border-left-width: 3px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00306f;
    border-right-color: #00306f;
    border-bottom-color: #00306f;
    border-left-color: #00306f;
    width:200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background-color: #FFFFFF;
    text-align: center;
    display: block;
    margin-left: 35px;  
    margin-top: 35px;   
}

上面的代码是显示一个菜单，我想在左手边显示一个子菜单，当我点击菜单，子菜单应该根据菜单显示。

注意:

我不想要单独的侧栏菜单，我想使用我的页眉菜单，当我点击页眉菜单时，侧栏菜单应该根据相关的页眉显示

需要 CSS 样式表代码帮助。

Answer 1

我给你带来了一些代码......但我不确定它是否正是你正在寻找的......所以，看看demo第一

HTML代码:

<div id="navigation">
<ul>
    <li>
    <a href="#">Menu Item 1</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>
    </li>

    <li>
    <a href="#">Menu Item 2</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>

    <li>
    <a href="#">Menu Item 3</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>

    <li>
    <a href="#">Menu Item 4</a>
        <ul>
              <li><a href="#">sub menu item 1</a></li>
              <li><a href="#">sub menu item 2</a></li>
              <li><a href="#">sub menu item 3</a></li>
              <li><a href="#">sub menu item 4</a></li>
        </ul>            
    </li>
</ul>    

样式表:

body{font-family:"Times New Roman", Times, serif; font-size:18px;}

#navigation
{width:100%; height:30px; background:#999;}

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; float:left; list-style:none; margin-left:15px; position:relative; height:30px;}

#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{color:#fff; text-decoration:underline;}

#navigation li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999;}

#navigation li:hover ul
{display:block; width:160px;}

#navigation li li
{list-style:none; display:list-item;}

#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{color:#fff; text-decoration:underline;}

俄勒冈来源 here