twitter bootstrap - jquery side bar menu issues onhover -
i trying create side menu bar see in android phones using bootstrap , jquery
what want when hover on particular element of mine inside sub-items should displayed.
this have done of now
the code follows
<!doctype html> <html> <head> <meta charset="utf-8"> <title>newspaper</title> <link rel="stylesheet" href="../css/bootstrap.min.css"/> <link rel="stylesheet" href="../css/font-awesome.min.css"> <script type="text/javascript" src="../js/jquery.js"></script> <!-- latest compiled , minified javascript --> <script src="../js/bootstrap.min.js"></script> <style type="text/css"> .mini-submenu{ background:#000; border: 1px solid rgba(0, 0, 0, 0.9); border-radius: 4px; padding: 9px; /*position: relative;*/ width: 42px; } .mini-submenu .icon-bar { border-radius: 1px; display: block; height: 2px; width: 22px; margin-top: 3px; } .mini-submenu .icon-bar { background-color: #fff; } </style> <script> var i=1; $(document).ready(function(){ $('.myicon').click(function() { if(i==1) { $('.ic').hide(200); $('#mylist').animate({width:"90px"},300); $('.myicon').removeclass('fa-rotate-90'); $('.myicon').addclass('fa-rotate-270'); i--; } else { $('.ic').show(200); $('#mylist').animate({width:"200px"},300); $('.myicon').removeclass('fa-rotate-270'); $('.myicon').addclass('fa-rotate-90'); i++; } }); $('#mylist > a').hover(function(){ $(this).children('div').show(1000); }, function(){ }); }); </script> </head> <body> <a href="#" data-toggle="collapse" data-target="#mylist"> <div class="mini-submenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> </a> <div class="list-group col-md-3 collapse" id="mylist"> <a class="list-group-item home" href="#" data-toggle="collapse" data-target="#toggledemo1"><i class="fa fa-home fa-fw"></i><span class="ic"> home</span><i class="fa fa-shield fa-rotate-90 myicon" style="float:right;margin-top:5px;"></i></a> <div class="collapse" id="toggledemo1" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#" class="list-group-item ic">submenu1.4</a></li> <li><a href="#" class="list-group-item ic">submenu1.5</a></li> <li><a href="#" class="list-group-item ic">submenu1.6</a></li> </ul> </div> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i><span class="ic"> library</span></a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i><span class="ic"> applications</span></a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw fa-spin"></i><span class="ic"> settings</span></a> <a href="#" data-toggle="collapse" data-target="#toggledemo" class="list-group-item"> <i class="fa fa-home fa-fw"></i><span class="ic">submenu 1</span> </a> <div class="collapse" id="toggledemo" style="height: 0px;"> <ul class="nav nav-list"> <li><a href="#" class="list-group-item ic">submenu1.1</a></li> <li><a href="#" class="list-group-item ic">submenu1.2</a></li> <li><a href="#" class="list-group-item ic">submenu1.3</a></li> </ul> </div> </div> </body> </html> here's example in jsfiddle
you can purely css, here's how :
wrap of element inside container
<div id="container"> <a href="#" data-toggle="collapse" data-target="#mylist"> <!-- button ui hover --> </a> <div class="list-group"> <!-- list item slide --> </div> </div> then apply css, list-group want hidden , appear left right, use this
.list-group { position: absolute; width: 100%; right: 100%; // make element out of viewport in left -webkit-transition: ease-in-out 0.5s; -moz-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; } transition used make slide, add css on hover , make list-group appear
#container:hover .list-group { right: 0; } and don't forget add
#container { display: inline-block; } so container (div element) width not 100% of it's parent, it's content, wouldn't trigger hover outside button , list-group
here's results on jsfiddle
Comments
Post a Comment