展开导航菜单通过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按钮，点击后

回答

相关问题