從左到右滑動Divider

我試圖讓我的邊欄以任何可能的方式從左到右滑動。我還需要它有一個句柄，以便人們可以點擊它，它會滑出，然後在關閉它時完全消失。這是我目前使用的HTML和我的CSS，如果這有所作爲。我剛開始做設計師，所以我不太清楚如何處理這個問題。我在網上看了很多，但找不到插件，所以如果有人可以建議一個插件或幫助我的代碼將是偉大的。從左到右滑動Divider

<div class="s-b-menu"> 
    <ul> 
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro</a></li> 
    <li class="s-b-border"><a href="#"><i class="icon-file"></i> BoM</a></li> 
    <li><a href="#"><i class="icon-hdd"></i> Override</a></li> 
    </ul> 
</div> 


.s-b-menu ul { 
    position: absolute; 
    padding: 8px; 
    margin-left: 0; 
    background-color: rgba(182, 182, 182, 0.71); 
    line-height: 20px; 
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
} 

.s-b-menu ul li { 
    padding: 4px; 
} 

.s-b-border { 
    border-bottom: dotted 1px; 
} 

.s-b-menu ul li a { 
    text-decoration: none; 
    color: #FFF; 
    display: block; 
} 

.s-b-menu ul li a:hover { 
    background: rgba(16, 0, 225, 0.74); 
} 

.s-b-menu ul li#active { 
    background: #0ff; 
}

來源

2013-06-25 T_Sanders

你有沒有嘗試過學習jQuery的一些？嘗試jQuery庫中的'animate' – Chanckjh

正如他所說，jQuery將成爲一條走向。你可以嘗試用CSS3 Transiitions做些事情，但它不會兼容。 – jakecraige

我回答了類似的問題[這裏]（http://stackoverflow.com/questions/8085423/slideout-from-right-to-left-on-div-with-a--variable-width/8085756#8085756）。在我的回答中查看jsFiddle，看到一個動畫'div'的例子。 – rossipedia

DEMO：http://jsfiddle.net/abc123/MgcDU/5482/

固定CSS這樣的菜單文本不跳來跳去。

HTML：

<div class="s-b-menu-hidden"> 
    Menu <i class="icon-arrow-right"></i> 
</div> 
<div class="s-b-menu"> 
    <ul> 
     <li id="menu-close">Menu <i class="icon-arrow-left"></i></li> 
    <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro</a></li> 
    <li class="s-b-border"><a href="#"><i class="icon-file"></i> BoM</a></li> 
    <li><a href="#"><i class="icon-hdd"></i> Override</a></li> 
    </ul> 
</div>

JS：

$(".s-b-menu-hidden, #menu-close").click(function(){ 
    $(".s-b-menu-hidden").toggle(); 
    $(".s-b-menu").toggle(); 
});

CSS：

一個辦法

.s-b-menu-hidden { 
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
    background-color: rgba(182, 182, 182, 0.71); 
    position: absolute; 
    padding: 12px; 
    margin-left: 0; 
} 

.s-b-menu-hidden:hover { 
    background-color: rgba(200, 184, 184, 0.71); 
} 

.s-b-menu { 
    display: none; 
} 

.s-b-menu:hover { 
    display: block; 
} 

.s-b-menu ul { 
    position: absolute; 
    padding: 8px; 
    margin-left: 0; 
    background-color: rgba(182, 182, 182, 0.71); 
    line-height: 20px; 
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
} 

.s-b-menu ul li { 
    padding: 4px; 
} 

.s-b-border { 
    border-bottom: dotted 1px; 
} 
.s-b-menu ul li a { 
    text-decoration: none; 
    color: #FFF; 
    display: block; 
} 

.s-b-menu ul li a:hover { 
    background: rgba(16, 0, 225, 0.74); 
} 

.s-b-menu ul li#active { 
    background: #0ff; 
}

來源

2013-06-25 20:02:29 abc123

這幾乎正是我需要的，但它需要點擊，因爲它可以在平板電腦上使用。這是一個簡單的修復？ –

絕對，我會更新提琴手http://jsfiddle.net/abc123/3fwMG/1/請注意，我給他們的地方點擊打開的菜單，因爲它會做，當他們點擊鏈接也關閉。 – abc123

你會如何做到這一點，所以可點擊標籤仍然在旁邊？這樣就很明顯你如何關閉它。這只是我說話的設計師。：P –

here is a jsfiddle describing the basics我已經採取利用JavaScript庫「jQuery」

其他答案可能會「切換」你的元素的顯示，但我沒有看到你正在尋找的動畫，所以我把它放在一起 - 用這種方法，我們實際上是使用這個特定的動畫設置側邊欄元素的擴展和收縮的jquery的：

$('#toggle').click(function(){ 
    $('.s-b-menu ul').animate({width: 'toggle'}); 
});

它是用於與ID #toggle元件onClick事件 - 它調用的jquery「動畫」與參數寬度切換呼叫。從而點擊將橫向打開和關閉動畫。享受，如果你有任何問題發表評論

編輯：回覆評論

在你的問題你說你想要一個「處理」就可以點擊進行運算 EN側邊欄。定義你的句柄元素，並用它的選擇器替換我的「#toggle」

來源

2013-06-25 20:22:01 Joe

那麼我需要添加id =「toggle」到我的代碼？ –

如果你看看我的代碼 - ive添加了一個「div」，其ID爲「切換」，你可能或可能不想使用這種確切的方法 - 在你的問題中，你說你想要一個「處理」人們可以點擊打開你的側邊欄。定義你的句柄元素，並用它的選擇器 – Joe

替換我的「#toggle」，就像我可以用圖像url替換它一樣。 –

從左到右滑動Divider

回答

相關問題