Jump to content


Photo

HTML/CSS Based 2-Tier Nav


  • Please log in to reply
13 replies to this topic

#1 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 28 January 2012 - 08:34 PM

Hey guys!

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 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 29 January 2012 - 08:08 PM

bump :( kinda need help in a hurry.... i'm entering into the *head-desk* phase.

#3 1P0

1P0

    Young Padawan

  • Members
  • Pip
  • 49 posts
  • Gender:Male

Posted 30 January 2012 - 11:17 AM

To make something exactly as you see it in other page, you can always save that webpage to your local disk and then start to trim it until you get only the menu running.
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 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 30 January 2012 - 09:57 PM

i was hoping to keep it light and stay away from Java... i should be able to use the hover psudoclass and show/hide a div under the nav... no?

#5 JimmyJames

JimmyJames

    Young Padawan

  • Members
  • Pip
  • 39 posts
  • Gender:Male
  • Location:Calgary, AB

Posted 31 January 2012 - 09:02 PM

It's not Java it's Javascript, in this case utilizing the jQuery library and yes you could build it with just HTML/CSS as you are describing but you won't have any animation and considering the code for the menu that you want is right in the source code, it would take less time to copy, paste, and chop it up then it would to code this in HTML/CSS from scratch.
  • 1P0 likes this

#6 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 01 February 2012 - 08:22 AM

i'm a bit new to jQwery...

#7 1P0

1P0

    Young Padawan

  • Members
  • Pip
  • 49 posts
  • Gender:Male

Posted 01 February 2012 - 11:57 AM

If you are going to do web design, is a good idea to learn jQuery.
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 JimmyJames

JimmyJames

    Young Padawan

  • Members
  • Pip
  • 39 posts
  • Gender:Male
  • Location:Calgary, AB

Posted 02 February 2012 - 01:58 AM

Lol are you trying to kill the help thread? :P
  • 1P0 likes this

#9 1P0

1P0

    Young Padawan

  • Members
  • Pip
  • 49 posts
  • Gender:Male

Posted 02 February 2012 - 10:39 AM

no... no.... just expand it opening the game :D
having a better palette of solutions usually helps.

#10 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 02 February 2012 - 06:49 PM

so, in conclusion... no way to use show/hide CSS to position a few lists under a nav bar? gotta rock the java?

#11 JimmyJames

JimmyJames

    Young Padawan

  • Members
  • Pip
  • 39 posts
  • Gender:Male
  • Location:Calgary, AB

Posted 02 February 2012 - 09:06 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>


#12 waz

waz

    Young Padawan

  • Members
  • Pip
  • 7 posts

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 1P0

1P0

    Young Padawan

  • Members
  • Pip
  • 49 posts
  • Gender:Male

Posted 04 February 2012 - 05:12 PM

Well, you said "I'm looking to build something like the nav on ... I'd like to keep it simple with HTML and CSS"
Now you say "This is similar to what I have written" :D
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 JimmyJames

JimmyJames

    Young Padawan

  • Members
  • Pip
  • 39 posts
  • Gender:Male
  • Location:Calgary, AB

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