1

http://jsfiddle.net/bryak/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/bryak/YPxb5/ 2 つのボタンがあります。

左側のボタンはトランジションを使用したドロップダウン メニューです (前の質問で非表示のチェックボックスの解決策を示してくれたユーザー: 'squint' に感謝します)。ボタン自体はメニューをトリガーするだけです。

右側のその隣には、アニメーションでスケールを使用してクリックダウンするように見えるボタンがあります

右側のボタンでメニューをボタンの真下にドロップしたい。

これを行う唯一の方法は JavaScript を使用することだと確信しています (ただし、CSS の巧妙さに常に驚かされます)。

何か案は？どうも

4

1 に答える 1

0

最後に、これが私が望んでいた方法で動作するようになりました.(stackoverflowユーザーの助けがなければ、もう一度感謝します.) jQueryは少し汚れていると確信していますが...動作します.

http://jsfiddle.net/bryak/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');
  }
于 2013-05-08T15:42:26.037 に答える