[英]Flip Menu with Fixed Top Menu
我有個疑問。
我需要實現一個翻轉菜單,但是在Internet上,我僅找到使用CSS轉換和供應商前綴的示例。 但是所有示例都顯示了不固定的div,下面的css具有固定的菜單(復制和粘貼的代碼並減少了網絡,不是很漂亮),當我有了菜單時,放置字體和返回div的方法沒有工作。
我需要這方面的幫助。 我需要一種將整個網站(包括設置菜單)替換為其他內容的方法(如翻頁一樣)。
示例: http : //davidwalsh.name/css-flip
我需要水平翻轉和右水平翻轉。
非常感謝。
CodePen: http ://codepen.io/anon/pen/BuHql
HTML:
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SEO</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Wordpress</a></li>
<li><a href="">Services</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS:
body { height: 800px; background: black; }
.nav{ background: white; z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav { height: 42px; background: white;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
在其他情況下,一種簡單的方法是使用以下構造:
HTML:
<div class="flipper">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
CSS:
/*Placing colors to facilitate understanding.*/
.front { background: green; }
.back { background: red; }
/*Add this class to a ".flipper" element using the way that is well to you (using a click, a hover or any other trigger).*/
.flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/*Add others vendors styles to more compatibility*/
}
/*Configuring the duration and the 3d mode of command*/
.flipper {
position: relative; /*relative is very important*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 2s;
-webkit-transition: 0.6s;
}
/*Required for no appear both at the same time*/
.front {
z-index: 2;
}
/*Causes the back start hidden (it is rotated 180 degrees, so it will not appear)*/
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/*Hide the rear face during the flip.*/
.front, .back {
position: relative; /*Again, the relative position is very important to work on any layout without crash.*/
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*needed for webkit browsers understand what's in front and what is behind*/
body {
perspective: 1000;
-webkit-perspective: 1000;
}
JS(jQuery)使用示例:
$('body').hover(function () {
$('.flipper').addClass('flip');
});
$('body').click(function () {
$('.flipper').removeClass('flip');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.