Question

http://jsfiddle.net/bryank/YPxb5/

#spacer{
 position:fixed;
    top:11px;
    left:200px;
height:79px;
width:155px;
background-color:#fff;

}
#spacer:active{
-webkit-animation: click .1s 1;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes click{
0%{-webkit-transform:scale(1,1);}
100%{-webkit-transform:scale(0.9,0.9);}
}

/*------begin nav------*/
#toggler { display: none; }
#nav{
    padding:0;
    position:fixed;
    top:11px;
    left:26px;
    font-family:helvetica;
    font-size:14px;
    background-image:url(logo_back.png);  
/*--  background-color:red;  --*/
    width:11.1em;
    height:5.7em;
    overflow:hidden;
    transition: height .4s;
    -webkit-transition: height .4s; 
}
input:checked + #nav{
    height:33em;
}
/*-- #nav a.bg:hover{
   background-color: rgba(0,0,0,0.0);

} --*/
#nav a{
   text-decoration:none;
   color:#000;   
}
#nav a:hover{
   background-color:#858585;

}
#nav div{
    text-indent:0.5em;
    line-height: 1.2em;
}

<!--img button-->
<div id="spacer"><a href="#"><img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg"   height="79" width="155" /></a></div>

<!--drop down nav-->
<label for="toggler">
    <input id="toggler" type="checkbox">
<div id="nav">
    <!--logo_image-->

       <img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" />

    <!---->

        <div style="height:1em;"></div>
        <div style="font-size:1.1em;"><b>Artists</b></div>
        <div style="height:1em;"></div>
        <div><a href="#">Ahnnu</a></div>
        <div><a href="#">Cex</a></div>
        <div><a href="#">Co La</a></div>
        <div><a href="#">Delicate Steve</a></div>
        <div><a href="#">Dope Body</a></div>
        <div><a href="#">Dustin Wong</a></div>
        <div><a href="#">Eachothers</a></div>
        <div><a href="#">En Passant</a></div>
        <div><a href="#">Gem Vision</a></div>
        <div><a href="#">Holy Ghost Party</a></div>
        <div><a href="#">Jimmy Joe Roche</a></div>
        <div><a href="#">Jason Urick</a></div>
        <div><a href="#">Ken Seeno</a></div>
        <div><a href="#">Kid Krusher</a></div>
        <div><a href="#">Lil Jabba</a></div>
        <div><a href="#">Rick Rab</a></div>
        <div><a href="#">Teeth Mountain</a></div>
        <div><a href="#">Teenage Souls</a></div>
        <div style="height:1em;"></div>
        <div style="font-size:1.1em;"><a href="#">INFO</a></div>
</div>
</label>

在我的小提琴中：http://jsfiddle.net/bryank/YPxb5/我有两个按钮，

左侧的

按钮是一个使用转换的下拉菜单（感谢用户：'squint'，用于显示上一个问题中隐藏的复选框解决方案。）按钮本身不会触发菜单。

并且在右边的那个旁边，我有一个按钮，似乎在动画中使用缩放来点击

我想让右边的按钮直接将菜单放在按钮下方。

我确信这样做的唯一方法是使用javascript（虽然我常常对那里的CSS聪明感到惊讶）我最近咬了一口气，决定从头开始学习javascript ...喜欢雄辩的javascript到目前为止的超极本

任何想法？ THX

Answer 1

最后让我按照我想要的方式工作。（不是没有来自stackoverflow用户的帮助，再次感谢。）我确定jQuery有点脏但是......它有效。

http://jsfiddle.net/bryank/YPxb5/1/

$(document).ready(function(){
 $('#spacer').mousedown(function(){
      var val=.9
      $(this).css({'-webkit-transform':'scale('+val+')','-moz-    transform':'scale('+val+')'})
      .mouseup(function(){
           var val2=1
           $(this).css({'-webkit-transform':'scale('+val2+')','-moz-transform':'scale('+val2+')'})
      });         

     });
});

$(document).ready(function(){
      $('#spacer').mouseup(dropDown2)     
});

 function dropDown2(){
        $('#nav').toggleClass('navDrop');
  }

CSS过渡＆amp;动画同时激活

1 个答案: