Having issue in my side menu bar fixed and content scroll able

309
November 22, 2016, at 1:59 PM

Here is my JS fiddle link
http://jsfiddle.net/kodi/d2s3uja0/1/

Having issue in my side menu bar fixed and content scrollable. Now I want to show the menu vertical in the left side bar like this

M
E
N
U

How do I do it in CSS. After I click that, JQuery toggle should work.

I am trying to achieve like this: wholefoodsmarket

Answer 1

use the css transition and put the #menu outside of the view and just toggle class on click of #menu_btn.

HTML

<div id="header">
<div id="wrapper">
<div id="menu_btn" style="float:left;"><a href="#" style="color:#FFFFFF;">Menu</a></div>
<div id="whole">
<div id="wleft">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About  Yes Service</a>
<ul id="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Network</a></li>
</ul>
</li>
<li><a href="#">Boys Uniforms</a></li>
<li><a href="#">Girls Uniforms</a><ul id="submenu">
<li><a href="#">T-shirt</a></li>
</ul></li>
<li><a href="#">Thin client</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--endofwleft-->
</div><!--endofwhole-->
</div><!--endofmenu-->    
</div><!--endofwrapper-->
</div><!--endofheader-->

CSS

@charset "utf-8";
/* CSS Document */

*{
margin:0px;
padding:0px;
}

#header{
width:100%;
height:60px;
background-color:#031f2d;   
}
#wrapper
{
width:1300px;
height:auto;
margin:auto;
}

#whole
{
width:1300px;
height:1000px;
float:left;
}

#wleft ul
{
width:200px;
height:auto;
float:left;
position:fixed;
outline: 1px solid;
}




#wleft  #menu li
{
width:200px;
height:30px;
float:left;
color:#FFFFFF;
background-color:#000000
}
#wleft  #menu li a{
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
#menu li
{
position:relative;
}
#menu li #submenu 
{
position:absolute;
}

#menu li #submenu
{
display:none;
}
#menu li:hover  #submenu
{
display:block;
position:absolute;
margin-left:200px;
}
#menu li:hover  #submenu li a 
{
border:#CCCCCC 1px solid;
height:25px;
width:300px;
background-color:#031f2d;
color:#fff;
display:block;
padding-top:5px;
}
#menu li:hover  #submenu li a 
{
text-align:left;
text-decoration:none;
}
#submenu li:hover{
background-color:#333333;
}
#menu_btn {
    transform: rotateZ(-90deg);
    position: relative;
    top: 22px;
    left: -5px;
}
#menu {
    position: absolute;
    top: 50px;
    left: -220px;
    transition: left 0.5s ease-out;
}
#menu.shown {
    left:0;
}

jQuery

$(document).ready(function(e) {
        $('#menu_btn').click(function(e) {
            $('#menu').toggleClass('shown');
        });
    });

DEMO

Rent Charter Buses Company
READ ALSO
Not whole jsp is coming through ajaxc all in Internet Explorer

Not whole jsp is coming through ajaxc all in Internet Explorer

I have created a div in my jsp and is making an ajax call. The jsp 'readFileNotings ' is getting returned properly in Firefox and Chrome, but not in any version of IE.

447
Validate form server side Spring MVC 3 inside jQuery dialog

Validate form server side Spring MVC 3 inside jQuery dialog

I´ve a problem to validate a form inside a jQuery dialog. In this project I´m using tiles too.

396
How to change Ajax request type and data

How to change Ajax request type and data

I'm using jQuery DataTables and I have a table that is loading data via an Ajax request. The Ajax source is being set at initialization.

378
How to send json String from jsp page to Spring mvc controller

How to send json String from jsp page to Spring mvc controller

I am trying to pass a simple json string to my controller,but it is not getting at there. I have a lot of other fields like inserting deleting etc inside my controller code,all of them will works perfectly,except this Json receiving.

486