のような2 つのsection要素があり<section class="first"></section><section class="rightarrow"></section>ます。最初のセクション要素にはメニューがあり、2 番目のセクション要素には右向きの矢印があります。この矢印は、最初のセクション要素の右上隅に配置され、最初のセクション要素の表示もなしに設定されています。矢印をクリックすると、メニューが表示され、右側にスライドします(これは機能します)が、問題は、この最初のセクションがブロックに設定された表示要素であり、矢印が次の行に移動することです。
最初の要素の右側に矢印を保持するにはどうすればよいですか？
ここに私のcssがあります
.first {
position: relative;
border-right: 1px solid #666;
display: none;
left: -370px;
float: left;
}
.rightarrow {
float: left;
display: inline-block;
position: relative;
margin-right: 1%;
margin-top: 2%;
figure {
width: 31px; height: 80px;
background: url(../../images/rightarrow.png) no-repeat;
cursor: pointer;
//left: 0;
}
}
ここに私のhtmlがあります
<section class="column three first">
<section class="row top topfirst">
<span class="user">Helsinki, Suomi</span>
<span class="comments user">Vaihda sijaintia</span>
<section class="clear"></section>
</section>
<section class="row top topsecond">
<figure>
<img src="assets/images/user.png" />
</figure>
<span class="user">Matti Meikalainen</span>
<span class="comments user">Kirjaudu ulos</span>
<p><input type="text" class="searchbox" placeholder="Hae" /></p>
</section>
<section class="row topthird">
Etusivu
</section>
<nav class="row accordion">
<ul class="menu">
<li>
<a href="#">Uutiset</a>
<figure class="down"></figure>
<section class="clear"></section>
<ul class="inside">
<li><a href="">Fringilla Condimentum</a></li>
<li><a href="">Lorem</a></li>
<li><a href="">Fringillau</a></li>
<li><a href="">Curabitur</a></li>
<li><a href="">Mollis</a></li>
<li><a href="">Ipsum</a></li>
<li><a href="">Lorem</a></li>
<li><a href="">Fringillau</a></li>
<li><a href="">Curabitur</a></li>
<li><a href="">Mollis</a></li>
<li><a href="">Ipsum</a></li>
</ul>
</li>
<li><a href="">Foorumi</a></li>
<li><a href="">Kauppa</a></li>
<li><a href="">Messut</a></li>
<li>
<a href="">Asiakaspalvelu</a>
<figure class="down"></figure>
<ul class="inside">
<li><a href="">Tilaa lehti</a></li>
<li><a href="">Muutos tilaukseen</a></li>
<li><a href="">Lähetä uutisvinkki</a></li>
<li><a href="">Anna palautetta</a></li>
</ul>
</li>
<li><a href="">Nakoislehti</a></li>
<li><a href="">Nae meidat</a></li>
</ul>
</nav>
</section>
<section class="rightarrow">
<figure>
</figure>
</section>
ここに私のjsがあります
$('.rightarrow').on('click', function () {
$('.rightarrow').animate({'margin-left': '366px'}, 1000);
/*
$('.first').animate({'left': '0px'}, 100, function () {
});*/
$('.second').animate({'margin-left': '10px'}, 1000, function () {
});
$('.first').css('display', 'block').animate({'left': '0px'}, 1000);
});