Clever Geek Handbook

Is it possible to make this menu vertical?

I found a jQuery dropdown menu on the internet, but the problem is it is horizontal, my project is using a vertical menu. Here are the codes:

HTML code:

    $(function() {

      $("ul.dropdown li").hover(function() {

        $(this).addClass("hover");
        $('ul:first', this).css('visibility', 'visible');

      }, function() {

        $(this).removeClass("hover");
        $('ul:first', this).css('visibility', 'hidden');

      });

      $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    });
      

        
        
        
      

    
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  background-color: #303030;
}
#page-wrap {
  width: 800px;
  margin: 25px auto;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
p {
  margin: 15px 0;
}
/*
     LEVEL ONE
     */

ul.dropdown {
  position: relative;
}
ul.dropdown li {
  font-weight: bold;
  float: left;
  zoom: 1;
  background: #000 url(../img/overlay2.png) repeat-x top left;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 1px;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
ul.dropdown a:hover {
  color: #000;
}
ul.dropdown a:active {
  color: #ffa500;
}
ul.dropdown li a {
  display: block;
  padding: 4px 8px;
  color: #fff;
  text-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
ul.dropdown li:last-child a {
  border-right: none;
}
/* Doesn't work in IE */

ul.dropdown li.hover,
ul.dropdown li:hover {
  background: #0070C0;
  color: black;
  position: relative;
  color: #fff;
}
ul.dropdown li.hover a {
  color: #fff;
  font-weight: bold;
}
/*
     LEVEL TWO
     */

ul.dropdown ul {
  width: 220px;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
}
ul.dropdown ul li {
  font-weight: normal;
  background: #909090 url(../img/overlay2.png) repeat-x top left;
  color: #000;
  float: none;
}
/* IE 6 & 7 Needs Inline Block */

ul.dropdown ul li a {
  border-right: none;
  width: 100%;
  display: inline-block;
}
/*
     LEVEL THREE
     */

ul.dropdown ul ul {
  left: 100%;
  top: 0;
}
ul.dropdown li:hover > ul {
  visibility: visible;
}
      

        
        
        
      

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simply Styled jQuery Dropdown</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
  <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>

<body>
  <div id="page-wrap">
    <ul class="dropdown">
      <li><a href="#">For Facilities</a>
        <ul class="sub_menu">
          <li><a href="#">Artificial Turf</a>
          </li>
          <li>
            <a href="#">Batting Cages</a>
            <ul>
              <li><a href="#">Indoor</a>
              </li>
              <li><a href="#">Outdoor</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Benches &amp; Bleachers</a>
          </li>
          <li><a href="#">Communication Devices</a>
          </li>
          <li><a href="#">Dugouts</a>
          </li>
          <li><a href="#">Fencing &amp; Windscreen</a>
          </li>
          <li><a href="#">Floor Protectors</a>
          </li>
          <li><a href="#">Foul Poles</a>
          </li>
          <li><a href="#">Netting</a>
          </li>
          <li><a href="#">Outdoor Furniture</a>
          </li>
          <li><a href="#">Outdoor Signs</a>
          </li>
          <li><a href="#">Padding</a>
          </li>
          <li><a href="#">Scoreboards</a>
          </li>
          <li><a href="#">Shade Structures</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
      <li><a href="#">Training &amp; Conditioning</a>
        <ul class="sub_menu">
          <li><a href="#">Ladders &amp; Sticks</a>
          </li>
          <li><a href="#">Hurdles</a>
          </li>
          <li><a href="#">Training Accessories</a>
          </li>
          <li><a href="#">Smart-Cart Training System</a>
          </li>
          <li><a href="#">Smart-Hurdle Collection</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
      <li><a href="#">Books-Videos</a>
        <ul class="sub_menu">
          <li><a href="#">Field Design</a>
          </li>
          <li><a href="#">Turf Management</a>
          </li>
          <li><a href="#">Training</a>
          </li>
          <li><a href="#"> - VIEW ALL - </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>
Run codeHide result


Images used in CSS are only vertical lines like channel, overlay.png image is longer than overlay2.png.

So is it possible to make the menu vertical?

+3


source to share


4 answers


you need to change two things

replace ul.dropdown li

with lower

ul.dropdown li {
font-weight: bold;
width: 200px;
zoom: 1;
background: #000 url(../img/overlay2.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

replace ul.dropdown ul

with lower



ul.dropdown ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:210px;
}

below - DEMO

$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});
      

        
        
        
      

    
 * {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    background-color:#303030;
} 
#page-wrap {
    width: 800px;
    margin: 25px auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

p {
    margin: 15px 0;
}

/*
 LEVEL ONE
 */
ul.dropdown {
    position: relative;
}

ul.dropdown li {
font-weight: bold;
width: 200px;
zoom: 1;
background: #000 url(../img/overlay2.png) repeat-x top left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   
margin:1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown a:hover {
    color: #000;
}

ul.dropdown a:active {
    color: #ffa500;
}

ul.dropdown li a {
    display: block;
    padding: 4px 8px;
    color: #fff;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

ul.dropdown li:last-child a {
    border-right: none;
}
 /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
    background: #0070C0;
    color: black;
    position: relative;
    color:#fff;
}

ul.dropdown li.hover a {
    color: #fff;
    font-weight:bold;
}

/*
 LEVEL TWO
 */
ul.dropdown ul {
    width: 220px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left:210px;
}

ul.dropdown ul li {
    font-weight: normal;
    background: #909090 url(../img/overlay2.png) repeat-x top left;
    color: #000;
    float: none;
}

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
    border-right: none;
    width: 100%;
    display: inline-block;
}

/*
 LEVEL THREE
 */
ul.dropdown ul ul {
    left: 100%;
    top: 0;
}

ul.dropdown li:hover > ul {
    visibility: visible;
}
      

        
        
        
      

    
<div id="page-wrap">           
        <ul class="dropdown">
            <li><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Artificial Turf</a></li>
                     <li>
                        <a href="#">Batting Cages</a>
                        <ul>
                            <li><a href="#">Indoor</a></li>
                            <li><a href="#">Outdoor</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Benches &amp; Bleachers</a></li>
                     <li><a href="#">Communication Devices</a></li>
                     <li><a href="#">Dugouts</a></li>
                     <li><a href="#">Fencing &amp; Windscreen</a></li>
                     <li><a href="#">Floor Protectors</a></li>
                     <li><a href="#">Foul Poles</a></li>
                     <li><a href="#">Netting</a></li>
                     <li><a href="#">Outdoor Furniture</a></li>
                     <li><a href="#">Outdoor Signs</a></li>
                     <li><a href="#">Padding</a></li>
                     <li><a href="#">Scoreboards</a></li>
                     <li><a href="#">Shade Structures</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
            <li><a href="#">Training &amp; Conditioning</a>
                <ul class="sub_menu">
                     <li><a href="#">Ladders &amp; Sticks</a></li>
                     <li><a href="#">Hurdles</a></li>
                     <li><a href="#">Training Accessories</a></li>
                     <li><a href="#">Smart-Cart Training System</a></li>
                     <li><a href="#">Smart-Hurdle Collection</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
            <li><a href="#">Books-Videos</a>
                <ul class="sub_menu">
                     <li><a href="#">Field Design</a></li>
                     <li><a href="#">Turf Management</a></li>
                     <li><a href="#">Training</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
        </ul>       
    </div>
Run codeHide result


+4


source


Using CSS floats, an element can be moved left or right, allowing other elements to wrap around it.

In CSS, strip FLOAT

and paste the width of the element.

replace this section ul.dropdown li {}

below



ul.dropdown li {
   font-weight: bold;
    /* float: left; */
    width:250px;
    zoom: 1;
    background: #000 url(../img/overlay2.png) repeat-x top left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;   
    margin:1px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

You can read about it here .

+1


source


Remove float:left

and give on width

. You can change this code:

ul.dropdown li {
    font-weight: bold;
    float: left;
    zoom: 1;
    background: #000 url(../img/overlay2.png) repeat-x top left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;   
    margin:1px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}

To

ul.dropdown li {
    font-weight: bold;
    width: 200px;
    zoom: 1;
    background: #000 url(../img/overlay2.png) repeat-x top left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;   
    margin:1px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
+1


source


Ok, based on sanoj lawrence , you just need to add these properties to your ul .dropdown ul

CSS:

    margin-top:-24px;   // to make the dropdown aligned with its li element.
    margin-left:-9px;   // to remove the gap between the dropdown and the li element

Here's a DEMO Fiddle .

Edit:

To fix the submenu issue noted by sanoj lawrence in a comment:

Just add these propreties to the css submenu ul.dropdown ul ul

:

margin-top:-1px;
margin-left:1px;

And this is a new violin .

+1


source






More articles:


All Articles