jquery - 通过箭头图像显示和隐藏的垂直菜单

Question

我是网络新手，所以现在我正在尝试创建一个带有箭头标记图像的菜单，通过单击垂直菜单中的图像来显示/隐藏。现在我尝试像下面那样点击它工作的菜单，但我必须像图像一样显示:

  A
    --a
    --C
    ...D
  B
    --f
    --g
    ..i

Answer 1

有使用 CSS/HTML5 的教程，只需单击链接 Hide/Show Menu CSS3/HTML5

HTML 代码

<div id="box" class="hide">
<ul id="tab">
    <li>
        <img id="arrow" onclick="toggle('box');" src="/images/arrowleft.png">
    </li>
</ul>
<div id="links">
    <div id="deco">
        <div class="bt"><a href="index.php" >HOME</a></div>
        <div class="bt"><a href="tut.php" >TUTS</a></div>
        <div class="bt"><a href="about.php" >ABOUT</a></div>
        <div class="bt"><a href="contact.php" >CONTACT</a></div>
    </div>
 </div>
</div>

CSS

#box{
width: 190px;
font-size: 12px;
line-height: 20px;
right: -140px;
top: 25%; /* change this value to place the menu higher or lower */
position: fixed;
z-index: 100;
}

#tab{
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
z-index: 99;
}

#tab li span{
display: block;
padding: 0 5px;
position: relative;
}

#links{
width: 80px;
padding: 10px;
float: left;
border-left: 1px solid #B4B8BB;
}

.show, .hide{
/* we specify the transition length for hiding and showing */
        transition: margin-right .4s ease-in;
-webkit-transition: margin-right .4s ease-in;
}

.hide{
margin-right:0px;
}

.show{
margin-right:95px;
}

#arrow, .bt{
cursor: pointer;
}

.bt{
width: 77px;
height: 40px;
margin: -1px;
text-align:center;
border:1px solid #858fa6;
font: bold 13px Helvetica,Arial,sans-serif;
text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
background:#014464;
     background-image: -o-linear-gradient(left, #1F82AF, #002F44);
    background-image: -ms-linear-gradient(left, #1F82AF, #002F44);
   background-image: -moz-linear-gradient(left, #1F82AF, #002F44);
background-image: -webkit-linear-gradient(left, #1F82AF, #002F44);
background-image: -webkit-gradient(linear, left top, right top, from(#1F82AF),    to(#002F44));
}

.bt a{
line-height: 40px;
color: #fff;
display: block;
}

.bt:hover{
transition: background .3s linear;
background: #32A3D3;
-o-transition: background .3s linear;
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
}

#deco{
width: 75px;
float: left;
        box-shadow:0px 0px 5px #000;
   -moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
}

JavaScript

function toggle(id) {
var el = document.getElementById(id);
var img = document.getElementById("arrow");
var box = el.getAttribute("class");
if(box == "hide"){
    el.setAttribute("class", "show");
    delay(img, "/images/arrowright.png", 400);
  }
else{
    el.setAttribute("class", "hide");
    delay(img, "/images/arrowleft.png", 400);
   }
}

function delay(elem, src, delayTime){
 window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);
}