CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user3856699
user3856699

Reputation:

vertical menu with bootstrap and jQuery

I'm trying to create a menu like this : Demo .

First of all : Here is my fiddle . There is a button top of the menu and there is a sidebar menu with 4 links that the last one has sublinks.

After click on the button menu get wider.

So far so good. I want to show sublinks with hover when mouse on the last links and also I want to show sublinks below the parent link with click when menu get wider .

I did this, but there is a problem. I want to show sublinks with click when menu get wide.

But now it didn't !

Here is my important CSS

.rightbar.noneStyle #rightMenu.accordion:hover .accordion-body.collapse{
    background: none repeat scroll 0 0 #fff;
    display: none;
    height:0;
    position:unset;
    right: auto;
    top: auto;
    visibility: visible;
}

.rightbar #rightMenu.accordion:hover .accordion-body.collapse {
    background: none repeat scroll 0 0 #fff;
    display: block;
    height: auto !important;
    position: absolute;
    left: 61px;
    top: -8px;
    visibility: visible;
}

Upvotes: 0

Views: 365

Answers (1)

Sushant Maharjan
Sushant Maharjan

Reputation: 64

I have made some changes in the css and made exactly as you have shown in Demo. Here is updated code in my http://jsfiddle.net/sushantmaharjan/z5ogk3yb/

I have used :not(selector) in css. Check for the browser compatibility. It works fine in most modern browsers.

Upvotes: 1

Related Questions