Infinity Infinity - 4 months ago 29
CSS Question

Expand navigation menu after button click via CSS / HTML

So imagine that I have narrow navigation menu like this:

Narrow menu:

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

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


As you see in sample above there is
[X]
button, after clicking It menu should expand as below:

Full menu:

.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 |
| |


As you see in sample above, after clicking
[X]
button again, It should make menu narrow again.

Of course these menus have different HTML divs, so maybe to achieve It I don't need to edit CSS at all? Have you ideas how could I achieve It?

You could test It at JS fiddle

Answer

well i am sure there is an easier and cleaner way to do this. but this solution works

for this to work. you need the jQuery library

in jsfiddle just click where it says JAVASCRIPT and select Jquery 3.1.0 from frameworks/extenstions

in your project add

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

in your <head> section

Changed also a bit the html structure. ( moved the nav titles inside their containers )

see jsfiddle

or code snippet below :

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 {
	position: absolute;
	height: 100%;
	margin-bottom: -350px !important;
	padding-bottom: 170px !important;
}
.leftside-narrow {
	width: 100px;
}
.leftside {
	position: relative;
	width: 300px;
	float: left;
	background-color: #042643;
	height: 100%;
	
}
.leftside a {
	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;
	background-color: #042643;
}
.leftside-menu a img {
	margin-left: 10px;
	margin-right: 10px;
	-webkit-filter: invert(100%);
}

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

/* Change the link color on hover */
li a:hover {
    background-color: #5d82a0;
    color: white;
	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">
  
  	<div class="leftside-narrow">	
    	Narrow Menu
			<li><a href="#"> [X] </a></li>		
			<li><a href="#news"><img src="images/news.png"/></a></li>
			<li><a href="#contacts"><img src="images/contacts.png"/></a></li>
		</div>

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

or you could use this Slide Effect to use slide instead of left:-200%

for eg :

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

and ofcourse more code for this to work. but this implies uploading the jQueryUI library

Comments