Thursday, October 17, 2013

How to Make a Sub Menu Horisontal

To create a horizontal submenu we only use ul and li tag as a reference, and can not be separated from CSS to set it to the workings of the submenu running properly

And the information will be used for the horizontal sub menu, and below is the whole of the HTML and CSS in post before 

HTML 
1 2 3 4 5 6 7 8 9

CSS 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 . mental {
  width: 100%;
  height: 25px;
  background: orange;
}
. Mental ul {
  margin: 0px;
  padding: 0px;
}
. Mental li {
 color: black;
 float: left;
 list-style: none;
 margin: 0;
 padding: 0px;
 background: orange;
}
. Mental li a {
 display: block;
 color: black;
 text-decoration: none;
 padding: 2px 10px 2px 10px;
}
. Mental li a: hover {
    color: BlueViolet;
    background: Lime;
    border-radius: 5px;
    -Moz-border-radius: 5px;
    -Webkit-border-radius: 5px;
}

Manufacturing phase of the sub menu
I will take a sample menu at the  
  • Category </ a> </ li>
    •   which will be the parent of the kid's menu ( see above code section horizontal menu that I gave a red color ) with notes first move the closing </ li> and put it in the end kids menu later, samples samples below 
  • Category </ a> <! - the cover must be removed at the end of the li kids menu ->



    •  
       </ Ul>
      </ Li> <! - where the cover is moved to the parent li element child cover menu ->

      See the closing tag
    • blue above that we just move under cover kid's menu, for the color orange is the child of the parent Category menu.

      For the entire code horizontal submenu that we just add can be seen below;

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 
      
 


      Up here we just create a horizontal submenu, sehubung we have not set the CSS child selector ie menu ul li , then what will happen is as shown below

      Structure submenu appearance looks bopenk and slightly bopak

      Phase tidying display sub menu 
      In tidying stage in children
    • menu, which is part of the CSS we need to set the value of the properties and the tidying horizontal sub menu will selectors. And below is the initial CSS tidying in the appearance of horizontal sub menu;

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 . mental li ul {
  position: absolute;   / * important, because the position is not a real child element submenu * /
  width: 170px;         / * set width of the child ul li parent * /
  left: 999em;          / * reposition ul li parent of the child to the left * /
}
. Mental ul li a {
 width: 140px;         / * make sure this value is smaller than. mental li ul * /
}
. Mental li li a {
 float: none;            / * neutralize the child's position in the menu. mental ul li * /
  margin: 0px;
  border-bottom: 1px solid # ccc;
  height: 30px;
}
. Mental li li a: hover {

 color: # ff0000;
}
. Mental li: hover ul {
 left: auto; / * neutralize positions that were left. mental ul li a state when the cursor is on the menu * / 
}

      Picture the end result

      The end result of making the sub menu horizontal



      Creating submenu or children's menu as well as we make horizontal menu one parent, but that requires a different make this submenu to set the position of the child is in a vertical menu as CSS settings that exist in the above example the child
        menu selector. Mental li ul require 170px wide, and the selector value. mental ul li a kecir have more than selector. mental ul li, if no child element of this menu momposisikan back to a horizontal

      More code 

      HTML 
      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      CSS
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 . mental {
  width: 100%;
  height: 25px;
  background: orange;
}
. Mental ul {
  margin: 0px;
  padding: 0px;
}
. Mental li {
 color: black;
 float: left;
 list-style: none;
 margin: 0;
 padding: 0px;
 background: orange;
}
. Mental li a {
 display: block;
 color: black;
 text-decoration: none;
 padding: 2px 10px 2px 10px;
}
. Mental li a: hover {
    color: BlueViolet;
    background: Lime;
    border-radius: 5px;
    -Moz-border-radius: 5px;
    -Webkit-border-radius: 5px;
}


      Creating sub menu horizontal finish. Now you can re-modify utilizing a selector using the : hover: focus: active and sebagaina, example . mental ul li a: hover . mental ul li a: focus . mental ul li a: aktive or . mental li li a: hover . mental li li a: focus . mental li li a: aktive Test your Creativity, may be useful.
      • Posted by at
      Labels: , , ,