HTML/CSS Based 2-Tier Nav
#1
Posted 28 January 2012 - 08:34 PM
I'm looking to build something like the nav on http://www.ubreakifix.com/
I'd like to keep it simple with HTML and CSS.
Anyone know of a good tut that outlines this? or maybe a snip-it?
thanks!!
#2
Posted 29 January 2012 - 08:08 PM
#3
Posted 30 January 2012 - 11:17 AM
It seems to be a bunch of divs that are shown or hidden according to the mouseover event in the menu options.
-you can use firebug to inspect javascript,
-chrome browser and press F12 to see the page content in a funny way and then the scripts tab to see the javascript they use
-you can right click the menu in chrome or firefox and press Inspect Element.
That is the good part of html, it is open for yoy to explore it.
Also, did you searched pixel2life and the web for: jquery menu ?
http://www.pixel2lif...nytime_IN_live/
jQuery UI has a lot of customizable elements that you can also check.
http://jqueryui.com/...tabs/#mouseover
- JimmyJames likes this
#4
Posted 30 January 2012 - 09:57 PM
#5
Posted 31 January 2012 - 09:02 PM
- 1P0 likes this
#6
Posted 01 February 2012 - 08:22 AM
#7
Posted 01 February 2012 - 11:57 AM
If you don't want to get involved too much in technical things, then go to
www.vworker.com or www.liveperson.com
and ask somebody to work for you. They will solve any sort of similar problems for 5 dollars and you can ask them to "teach" you what they do and how they do it. Even arrange an skype video conference to share screens.
Perhaps a video can help you.
http://www.youtube.com/watch?v=tdsXrmz1_L4
#8
Posted 02 February 2012 - 01:58 AM
- 1P0 likes this
#9
Posted 02 February 2012 - 10:39 AM
having a better palette of solutions usually helps.
#10
Posted 02 February 2012 - 06:49 PM
#11
Posted 02 February 2012 - 09:06 PM
<style type="text/css"> * { margin:0; padding:0; } ul#nav li { float:left; list-style-type:none; border:1px solid #ccc; background-color:#eee; width:200px; height:28px; display:block; } ul#nav li a { color:#444; display:block; padding:4px 8px; } ul#nav li ul { display:none; position:relative; z-index:10; } ul#nav li ul li { float:none; } ul#nav li ul li ul { position:relative; left:200px; top:-28px; } ul#nav li:hover > ul { display:block; } </style> <ul id="nav"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a> <ul> <li><a href="services-link1.html">Services Link 1</a></li> <li><a href="services-link2.html">Services Link 2</a> <ul> <li><a href="services-link2-1.html">Services Link 2-1</a></li> </ul> </li> </ul> </li> </ul>
#12
Posted 04 February 2012 - 02:46 PM
Yes it is possible with just HTML and CSS, use 1P0's $5 fix or I'd be happy to do it for my regular contractors rate. This is a large hunk of code you are asking for, it is unlikely anyone will write the whole thing for you, heres an example of a simple HTML CSS menu with multiple layers though, this is far from polished and complete but demonstrates how to achieve setting the submenus to be hidden, but then visible when rolling over the parent list item. Enjoy.
<style type="text/css"> * { margin:0; padding:0; } ul#nav li { float:left; list-style-type:none; border:1px solid #ccc; background-color:#eee; width:200px; height:28px; display:block; } ul#nav li a { color:#444; display:block; padding:4px 8px; } ul#nav li ul { display:none; position:relative; z-index:10; } ul#nav li ul li { float:none; } ul#nav li ul li ul { position:relative; left:200px; top:-28px; } ul#nav li:hover > ul { display:block; } </style> <ul id="nav"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a> <ul> <li><a href="services-link1.html">Services Link 1</a></li> <li><a href="services-link2.html">Services Link 2</a> <ul> <li><a href="services-link2-1.html">Services Link 2-1</a></li> </ul> </li> </ul> </li> </ul>
This is similar to what I have written... but the problem I'm facing is displaying the sub menus horizontally aligned to the left of the main nav. Having a relative position on a list item will align it to that list, not the main div or nav.
#13
Posted 04 February 2012 - 05:12 PM
Now you say "This is similar to what I have written"
If you have code and you have an issue with it, it is usually better to post the code first, because is much more easy for others to see where the problem is.
#14
Posted 05 February 2012 - 07:12 PM
If you have code and you have an issue with it, it is usually better to post the code first, because is much more easy for others to see where the problem is.
This is similar to what I have written... but the problem I'm facing is displaying the sub menus horizontally aligned to the left of the main nav. Having a relative position on a list item will align it to that list, not the main div or nav.
using CSS to the list elements you want to float horizontally display them as block elements and float them left.
ul.yourclass { display:block; float:left; }
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users