Jump to content

Side Menu


phpnoob
 Share

Recommended Posts

HiI have a nice css side menu, but i have a problem, i cant make 2 side menu.Main menu vvvVetical menu >>> 1 side menu >> 2 side menu<---- cant do .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; width:110px; height:24px; text-align:center; border:0px solid #000000; line-height:20px; font-size:12px; overflow:hidden; margin-right: auto; margin-left: auto; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bolder; background-image: url(image/menu.png); background-repeat: no-repeat;}.menu ul {padding:0; margin:0; list-style: none;}.menu ul li {float:left; position:relative;}.menu ul li ul {display: none;}.menu ul li:hover a {color: #333333; background-image: url(image/menu.png); background-position: -110px 0px;}.menu ul li:hover ul {display:block; position:absolute; top:24px; left:0; width:110px;}.menu ul li:hover ul li a.hide {background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li:hover ul li:hover a.hide {color: #FFFFFF; width: 110px; background-image: url(image/menu.png); background-position: -110px -26px; background-repeat: no-repeat;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {color: #FFFFFF; background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li:hover ul li a:hover {color: #FFFFFF; background-repeat: no-repeat; background-image: url(./image/menu.png); background-position: -110px -26px;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:110px; top:0;}.menu ul li:hover ul li:hover ul.left {left:-110px;} HTML <div class="menu"> <ul> <li> <a>vertical menu</a> <ul class="menu"> <li> <a class="hide">side menu1 ></a> <ul> <li> <a>want another menu here</a> </li> </ul> </li> </ul> <li> <ul></div> help me.

Link to comment
Share on other sites

I wanna help but I don't understand what you want. Can you describe it saying horizontal or vertical menus, or do a image of how you want it to look..?
i want 1 more horizontal menu main menu > first horizontal menu > second horizontal menu "i cant make this menu" Edited by phpnoob
Link to comment
Share on other sites

???? are you looking for something similar to this

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; width:110px; height:24px; text-align:center; border:0px solid #000000; line-height:20px; font-size:12px; overflow:hidden;margin-right: auto; margin-left: auto; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bolder; background-image: url(image/menu.png); background-repeat: no-repeat;}.menu ul {padding:0; margin:0; list-style: none;}.menu ul li {float:left; position:relative;}.menu ul li ul {left: -99999em; position:absolute; background-color:#CC66CC; margin-left: 110px; width:110px;top:0px;}.menu ul li ul ul {background-color:#CC0000;}.menu ul li:hover a {color: #333333; background-image: url(image/menu.png); background-position: -110px 0px;}.menu ul li:hover ul { left:0;}.menu ul li:hover ul ul, .menu ul li ul li:hover ul ul {left:-999em;}.menu ul li ul li:hover ul {left:0;}.menu ul li ul li a.hide:hover {background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li ul li a:hover {color: #FFFFFF; background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;} </style></head><body><div class="menu"><ul><li>  <a>vertical menu</a>  <ul>   <li>    <a class="hide">side menu1 ></a>    <ul>	 <li>	  <a>want another menu here</a>	 </li>    </ul>   </li>  </ul><li></ul></div></body></html>

Link to comment
Share on other sites

???? are you looking for something similar to this
<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">.menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; width:110px; height:24px; text-align:center; border:0px solid #000000; line-height:20px; font-size:12px; overflow:hidden;margin-right: auto; margin-left: auto; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bolder; background-image: url(image/menu.png); background-repeat: no-repeat;}.menu ul {padding:0; margin:0; list-style: none;}.menu ul li {float:left; position:relative;}.menu ul li ul {left: -99999em; position:absolute; background-color:#CC66CC; margin-left: 110px; width:110px;top:0px;}.menu ul li ul ul {background-color:#CC0000;}.menu ul li:hover a {color: #333333; background-image: url(image/menu.png); background-position: -110px 0px;}.menu ul li:hover ul { left:0;}.menu ul li:hover ul ul, .menu ul li ul li:hover ul ul {left:-999em;}.menu ul li ul li:hover ul {left:0;}.menu ul li ul li a.hide:hover {background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li ul li a:hover {color: #FFFFFF; background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;} </style></head><body><div class="menu"><ul><li>  <a>vertical menu</a>  <ul>   <li>	<a class="hide">side menu1 ></a>	<ul>	 <li>	  <a>want another menu here</a>	 </li>	</ul>   </li>  </ul><li></ul></div> </body></html>

no :( At the moment i can make this [ Main menu 1 ] [ Main menu 2 ] [ Main menu 3 ] V[Vertical menu 1]>>[Horizontal menu 1] V V[Vertical menu 2] [Horizontal menu 2] V [[Horizontal menu 3] And i want this.The V and >> where can open [ Main menu 1 ] [ Main menu 2 ] [ Main menu 3 ] V[Vertical menu 1]>>[Horizontal menu 1]>>[Horizontal 2 menu 1] V V V[Vertical menu 2] [Horizontal menu 2] [Horizontal 2 menu 2] V V [[Horizontal menu 3] [Horizontal 2 menu 3] I cant believe this, ....Click Quole to see my full idea .... Edited by phpnoob
Link to comment
Share on other sites

??? Are we talking initially about A horizontal menu, that submenu levels are vertical, whose submenus are horizontal? cause that what I thought you where asking for until I got to '[Horizontal menu 3] [Horizontal 2 menu 3]' then it I got mucking fuddled again. Image of some sort?
yes its complicated to say what i want :D, i realized i was post it wrong.i have a website based in hobys.For exampleIn main menu have Game menu, in the game menu have pc and konzol and others, in pc sub menu atm have years and month but its to much so i think to spil it, so in the first pc sub menu i want only years, and in years sub menu i want to open month, atm where i want the month menu not hiding, if the mouse move to pc all menu "Years >>> month" opened Edited <div class="menu"><ul><li><a>Game</a><ul class="menu"><li><a class="hide">Pc ></a><ul class="menu"><li><a class="hide">2012 ></a><ul><li><a>01</a></li><li><a>02</a></li><li><a>this menu not hiding</a></li></ul></li></ul></li></ul><li><ul></div> Edited by phpnoob
Link to comment
Share on other sites

Because if i had a situation where i required a background image for the top and bottom of page, that covers the whole width of page, using your method i'm stuck, can i add another body element No! maybe add div container within html No! definitely not! OR using outer container method, add outer container within body, which adjusts to wrapper content, YES! no problem. DON'T adjust width for body leave it alone, it is the main building block area for whole site.
what? speak clearly, i don't understand your post, are you understand what i want? Edited by phpnoob
Link to comment
Share on other sites

Sorry! I wondered where that post went? I saved and it disappeared, its was for another topic, two monitors can get confusing sometimes.
can you help me? atm in pc menu i have 28 line, 3 years and almost all month.i thinking another idea, if you cant make +1 sub menu in the first sub menu, then how about i ckick the first sub menu "years" and the month draw down in year linefor example20112010<-- clicked 01 02 03 etc2009
Link to comment
Share on other sites

Still not absolutely sure here, Like this I hope

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; width:110px; height:24px; text-align:center; border:0px solid #000000; line-height:20px; font-size:12px; overflow:hidden;margin-right: auto; margin-left: auto; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bolder; background-image: url(image/menu.png); background-repeat: no-repeat;}.menu ul {padding:0; margin:0; list-style: none;}.menu ul li {float:left; position:relative;}.menu ul li ul {left: -99999em; position:absolute; background-color:#CC66CC; /*margin-left:*/ 110px; width:110px;top:24px;}.menu ul li ul ul {background-color:#CC0000;}.menu ul li:hover a {color: #333333; background-image: url(image/menu.png); background-position: -110px 0px;}.menu ul li:hover ul { left:0;}.menu ul li:hover ul ul, .menu ul li ul li:hover ul ul {left:-999em;}.menu ul li ul li:hover ul {left:0; margin-left:110px; top:0;}.menu ul li ul li ul li:hover ul {left:0; margin-left:0px; top:24px;}.menu ul li ul li a.hide:hover {background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li ul li a:hover {color: #FFFFFF; background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}</style></head><body><div class="menu" style="background-color: #CC33CC;"><ul><li>  <a>Game</a>  <ul>   <li>    <a class="hide">Pc ></a>    <ul>	 <li>	  <a class="hide">2012 ></a>	  <ul>	   <li>	    <a>01</a>	   </li>	   <li>	    <a>02</a>	   </li>	   <li>	    <a>03</a>	   </li>	  </ul>	 </li>    </ul>   </li>   <li>    <a class="hide">Console ></a>    <ul>	 <li>	  <a class="hide">2012 ></a>	  <ul>	   <li>	    <a>01</a>	   </li>	   <li>	    <a>02</a>	   </li>	   <li>	    <a>04</a>	   </li>	  </ul>	 </li>    </ul>   </li>        </ul></li></ul></div></body></html>

Link to comment
Share on other sites

looking at it AGAIN the only possible solution is a menu like this

<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">.menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; width:110px; height:24px; text-align:center; border:0px solid #000000; line-height:20px; font-size:12px; overflow:hidden;margin-right: auto; margin-left: auto; font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bolder; background-image: url(image/menu.png); background-repeat: no-repeat;}.menu ul {padding:0; margin:0; list-style: none;}.menu ul li {float:left; position:relative;}.menu ul li ul {left: -99999em; position:absolute; background-color:#CC66CC; /*margin-left:*/ 110px; width:110px;top:24px;}.menu ul li ul ul {background-color:#CC0000;}.menu ul li:hover a {color: #333333; background-image: url(image/menu.png); background-position: -110px 0px;}.menu ul li:hover ul { left:0;}.menu ul li:hover ul ul, .menu ul li ul li:hover ul ul {left:-999em;}.menu ul li ul li:hover ul {left:0; margin-left:110px; top:4px;}.menu ul li ul li ul li:hover ul {left:0; margin-left:110px; top:4px; background-color:#FFCC33;}.menu ul li ul li a.hide:hover {background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}.menu ul li ul li a:hover {color: #FFFFFF; background-image: url(./image/menu.png); background-position: 0px -26px; background-repeat: no-repeat;}</style></head><body><div class="menu" style="background-color: #CC33CC;"><ul>    <li>        <a>Game</a>        <ul>            <li>                <a class="hide">Pc ></a>                <ul>                    <li>                        <a class="hide">2012 ></a>                        <ul>                            <li>                                <a>01</a>                            </li>                            <li>                                <a>02</a>                            </li>                            <li>                                <a>03</a>                            </li>                        </ul>                    </li>                    <li>                        <a class="hide">2013 ></a>                        <ul>                            <li>                                <a>01</a>                            </li>                            <li>                                <a>02</a>                            </li>                            <li>                                <a>03</a>                            </li>                            <li>                                <a>04</a>                            </li>                                                </ul>                    </li>                                    </ul>            </li>            <li>                <a class="hide">Console ></a>                <ul>                    <li>                        <a class="hide">2012 ></a>                        <ul>                            <li>                                <a>01</a>                            </li>                            <li>                                <a>02</a>                            </li>                            <li>                                <a>03</a>                            </li>                                                        <li>                                <a>04</a>                            </li>                            <li>                                <a>05</a>                            </li>                        </ul>                    </li>                </ul>            </li>                                            </ul>    </li></ul></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

thx :)now i need to find the good setting for imagesI mean, i have only 1 image "menu.png", you probable notice it, i was position it in all action.Atm the menu looks like this, the main line have the right image position, main drop down line and the sub line not, its realy chaotic :D

Edited by phpnoob
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...