帶固定頂部菜單的翻轉菜單

我有疑問。帶固定頂部菜單的翻轉菜單

我需要實現一個翻轉菜單，但在互聯網上，我發現只有使用css轉換的示例和供應商前綴。但所有的例子都顯示了div並不固定，下面的css有一個固定的菜單（複製粘貼代碼並減少網絡，不是很漂亮），當我有一個菜單和put字體和後面的div的方法don'工作。

我需要幫助。我需要一種將整個站點（包括設置菜單）替換爲其他內容的方式（作爲頁面的大轉彎）。

實施例：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;}

來源

2014-01-27 user2752929

對不起，我沒有erstand。什麼是問題？你能發送一個鏈接到例子，顯示不固定的div嗎？ –

例如：http://davidwalsh.name/css-flip – user2752929

我沒有看到任何嘗試實現翻轉代碼 –

一個簡單的方法來做到這一點，否則情況下，使用以下結構：

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'); 
});

來源

2014-01-27 23:21:16

有一個簡單的jQuery插件，可以幫助你實現這一效果。

你可以在這裏找到： http://guilhemmarty.com/flippy//

這是很容易使用，你可以選擇你想要什麼樣的翻轉。 ;）

來源

2014-01-27 20:23:28

帶固定頂部菜單的翻轉菜單

回答

相關問題