展開導航菜單通過CSS/HTML按鈕，點擊後

-1

所以，想象一下，我有一個像這樣狹窄的導航菜單：展開導航菜單通過CSS/HTML按鈕，點擊後

窄菜單：

.narrow-menu { 
    width: 60px; 
    /* Some more conditions */ 
} 

|[X]| <-- after clicking this button menu should expand as below 
| | 
| A | 
| B | 
| C | 
| D | 
| E | 
| F | 
| G |

正如你在示例見上面有[X]按鈕，後點擊它菜單應如下擴展：

完整的菜單：

.full-menu { 
    width: 300px; 
    /* Some more conditions */ 
} 

|Profile Photo [X]| <-- after clicking this button menu should became narrow again 
|Some Info  | 
|     | 
| Home   | 
| News   | 
| Contacts  | 
| About Us  | 
|     |

如您在上面的示例中看到的，再次單擊[X]按鈕後，應該使菜單再次縮小。

當然這些菜單有不同的HTML div，所以也許實現它我不需要編輯CSS呢？你有想法我怎麼能實現它？

你可以在JS fiddle

來源

2016-07-29 Infinity

顯示您迄今爲止所嘗試的內容 – guradio

您能分享相關的HTML和JQ，以便我們可以幫助您更好嗎？ –

@guradio我沒有想法，我怎麼能通過CSS實現它，這就是爲什麼我要求你的幫助，它怎麼可能完成。 – Infinity

測試好，我相信有一個更簡單和更清潔的方式來做到這一點。但這個解決方案工作

爲此工作。你需要jQuery庫

中的jsfiddle

只需點擊它說：JAVASCRIPT和框架/ extenstions選擇jQuery的3.1.0

在您的項目

在<head>部分添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

也改變了一下html結構。（移動它們的容器內的導航標題）

看到jsfiddle

或下面的代碼片段：

var narrowbut = $(".leftside-narrow li:first-child a"), 
 
    fullbut = $(".profile-info li:first-child a") 
 
    
 
$(narrowbut).click(function(){ 
 
    $(".leftside-narrow").animate({'left':'-200%'},350); 
 
    $(".leftside").animate({'left':'0%'},350); 
 

 
}); 
 
$(fullbut).click(function(){ 
 
    $(".leftside-narrow").animate({'left':'0%'},350); 
 
    $(".leftside").animate({'left':'-200%'},350); 
 

 
});

.leftside-narrow,.leftside { position:absolute;top:0} 
 
.leftside { left:-200%;} 
 

 
.leftside-container { 
 
\t position: absolute; 
 
\t height: 100%; 
 
\t margin-bottom: -350px !important; 
 
\t padding-bottom: 170px !important; 
 
} 
 
.leftside-narrow { 
 
\t width: 100px; 
 
} 
 
.leftside { 
 
\t position: relative; 
 
\t width: 300px; 
 
\t float: left; 
 
\t background-color: #042643; 
 
\t height: 100%; 
 
\t 
 
} 
 
.leftside a { 
 
\t color: #9aa8b3; 
 
} 
 

 
.submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.submenu a { 
 
    background-color: #5d82a0; 
 
    padding-left: 60px; 
 
} 
 
/* hover behaviour for links inside .submenu */ 
 
.submenu a:hover { 
 
    background-color: #5d82a8; 
 
} 
 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
} 
 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    max-height: 200px; 
 
} 
 
.leftside ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    /* position: fixed;*/ 
 
    height: 100%; 
 
    overflow: auto; 
 
\t background-color: #042643; 
 
} 
 
.leftside-menu a img { 
 
\t margin-left: 10px; 
 
\t margin-right: 10px; 
 
\t -webkit-filter: invert(100%); 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
\t border-bottom: solid #284158 1px; 
 
} 
 

 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #5d82a0; 
 
    color: white; 
 
\t height: 100%; 
 
} 
 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="leftside-container"> 
 
    
 
    \t <div class="leftside-narrow"> \t 
 
    \t Narrow Menu 
 
\t \t \t <li><a href="#"> [X] </a></li> \t \t 
 
\t \t \t <li><a href="#news"><img src="images/news.png"/></a></li> 
 
\t \t \t <li><a href="#contacts"><img src="images/contacts.png"/></a></li> 
 
\t \t </div> 
 

 
\t \t <div class="leftside"> \t 
 
    Full Menu 
 
\t \t \t <div class="leftside-menu"> \t 
 
\t \t \t \t <div class="profile"> 
 
\t \t \t \t \t <div class="profile-info"> 
 
\t \t \t \t \t \t <li><a href="#"> [X] </a></li> \t 
 
\t \t \t \t \t \t <span class="profile-span name">John Doe</span><br> 
 
\t \t \t \t \t \t <span class="profile-span">Designer</span><br> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <nav class="navigation"> 
 
\t \t \t \t \t <ul class="mainmenu"> \t \t \t \t \t 
 
\t \t \t \t \t \t <li><a href="#news"><img src="images/news.png"/> News</a></li> 
 
\t \t \t \t \t \t <li><a href="#contacts"><img src="images/contacts.png"/>Contacts</a> 
 
\t \t \t \t \t \t \t <ul class="submenu"> 
 
\t \t \t \t \t \t \t \t <li><a href="#">1</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="#">2</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav> 
 
\t \t \t </div> <!-- End of leftside-menu --> \t \t \t \t 
 
\t \t </div> <!-- End of leftside --> 
 
\t </div>

，或者您可以使用此Slide Effect使用slide而不是left:-200%

爲如：此

$(".leftside-narrow").hide('slide', {direction: 'left'}, 1000); 
$(".leftside").show('slide', {direction: 'right'}, 1000);

和ofcourse更多的代碼工作。但這意味着上傳jQueryUI庫

來源

2016-07-29 11:03:24

謝謝你的回答，但我不明白爲什麼它不適合我。我已經在本地嘗試過了，之後我創建了一個小提琴作爲你的，但它仍然沒有工作，不明白你是如何實現它的工作？ https://jsfiddle.net/9cak0xm5/1/也許我錯過了一些東西...... – Infinity

以及你需要添加jQuery庫。正如你所看到的...在我的小提琴和代碼片段中添加了jQuery //還編輯了我應該如何添加jQuery的答案 –

我已經在頭部添加了jQuery lib，但仍然無法工作。這可能發生，我試圖從本地測試這個HTML（從c：/index.html）？也許jQuery不在這種情況下工作？ – Infinity

展開導航菜單通過CSS/HTML按鈕，點擊後

回答

相關問題