Jump to content

Require help with JavaScript Drop-Down Menu


Recommended Posts

Hello! I'm working on building a small website for my company. I need help in figuring out why the menu isn't working out... Here is what I've built so far: http://silverbergandsons.com/beta/

  1. I can't figure out why the list items are shifted over to the right like there's an invisible bullet there... this applies to the submenu too.
  2. When I use width:100% for the background of the menu, it stretches out the page to the right side... Probably has sometime to do with the invisible bullets in problem #1.
  3. I can't get the images/menu buttons centered in the page...
  4. And lastly, I've been building this in Chrome... It reeeeeally doesn't look right in IE. lol

Here is the HTML (please excuse the messy coding, I will tidy it up and make sure it's W3C validated in the end. Just need help with the JS menu):

<html><head><title>S. Silverberg & Sons Jewelers - Tucson, Arizona - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry.</title><meta  name="description"  content="S. Silverberg & Sons Jewelers - Custom design your own unique and original engagement ring, wedding band, bridal set, or other fine jewelry."  /><meta  name="keywords"  content="silverberg, sons, tucson, arizona, jewelers, jeweler, jewelry, store, stores, engagement, wedding, bridal, anniversary, ring, rings, band, bands, set, sets, custom, design, designed, designing, diamond, diamonds, gift, gifts, gem, gems, gemstone, gemstones, precious stones, birthstones, bracelet, bracelets, pendant, pendants, necklace, necklaces, earring, earrings, gold, platinum, estate, estates, buy, sell, repair, repairs, appraisal, appraisals, appraiser, insurance, watch, watches, seiko, men, ladies "  /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script type="text/javascript" src="java.js"></script></head><body><div class="header" style="text-align:center"><img src="images/header_logo.png" alt="Welcome to S. Silverberg & Sons Jewelers"></div><ul id="menu"><li><a href="#"><img src="images/nav_jewelry.png" border="0" alt="Jewelry" onmouseover="this.src='images/nav_jewelry_select.png'" onmouseout="this.src='images/nav_jewelry.png'" /></a></li><li><a href="#"><img src="images/nav_diamonds.png" border="0" alt="Diamonds" onmouseover="this.src='images/nav_diamonds_select.png'" onmouseout="this.src='images/nav_diamonds.png'" /></a></li><li><a href="#"><img src="images/nav_design.png" border="0" alt="Custom Designing" onmouseover="this.src='images/nav_design_select.png'" onmouseout="this.src='images/nav_design.png'" /></a>			<ul class="noJS">			   <li><a href="#">Hellenico</a></li>			   <li><a href="#">Genere</a></li>			   <li><a href="#">Indulgentia</a></li>			</ul></li><li><a href="#"><img src="images/nav_services.png" border="0" alt="Services" onmouseover="this.src='images/nav_services_select.png'" onmouseout="this.src='images/nav_services.png'" /></a></li><li><a href="#"><img src="images/nav_goldbuy.png" border="0" alt="Gold Buying" onmouseover="this.src='images/nav_goldbuy_select.png'" onmouseout="this.src='images/nav_goldbuy.png'" /></a></li><li><a href="#"><img src="images/nav_learn.png" border="0" alt="Learn More" onmouseover="this.src='images/nav_learn_select.png'" onmouseout="this.src='images/nav_learn.png'" /></a></li><li><a href="#"><img src="images/nav_about.png" border="0" alt="About Us" onmouseover="this.src='images/nav_about_select.png'" onmouseout="this.src='images/nav_about.png'" /></a></li><li><a href="#"><img src="images/nav_contact.png" border="0" alt="Contact Us" onmouseover="this.src='images/nav_contact_select.png'" onmouseout="this.src='images/nav_contact.png'" /></a></li></ul></body></html>

Here is the CSS:

body{padding: 0;margin: 0;background-color:#111111;} .header{background-image:url('images/header_bg.png');background-repeat:repeat-x;} #menu {float: left;background-image:url('images/nav_bg.png');background-repeat:repeat-x;font-family:  Georgia;font-size: 12px;margin: auto;}#menu > li {float: left;}#menu li a {display: block;text-decoration: none;text-align:center;}#menu ul {position:absolute;display: none;list-style: none;float: left;}#menu ul li a {width: 80px;padding: 0 1.5em;height: 2em;line-height: 2em;color: #ffffff;text-align: left;background: #000000;}#menu li:hover ul.noJS {display: block;}#menu ul li:hover a {color: #f0bd66;background: #121212;}

And here is the javascript:

$(function(){	$('#menu').find('> li').hover(function(){		$(this).find('ul')		.removeClass('noJS')		.stop(true, true).slideToggle('fast');	});});

Any help would be GREATLY appreciated. Thank you in advance! EDIT: If this is more of a CSS question, please feel free to move my topic. Thank you!

Edited by A Novice Coder
Link to post
Share on other sites
1. I can't figure out why the list items are shifted over to the right like there's an invisible bullet there... this applies to the submenu too.
there is 1.5em padding applied to the sublist items for custom design. i.e.
#menu ul li a

remove that and the sublist items are centered. Currently the main nav items looks centered to me (Chrome/OSX)

2. When I use width:100% for the background of the menu, it stretches out the page to the right side... Probably has sometime to do with the invisible bullets in problem #1.
Do you mean with the CSS3 property? <ul> is a block level item by default, and will expand to fit the width of it's container. I also wouldn't be using positioning on the <ul> either. especially when combined with float, those two don't really work together.
I can't get the images/menu buttons centered in the page...
to center an inline element, like an <a>, use text-align:center on it's parent. to center a block level element, like <div>, <p>, <ul>, give it width that is less than it's container, and add margin: 0px auto to it's CSS
4. And lastly, I've been building this in Chrome... It reeeeeally doesn't look right in IE. lol
Probably because you have no doctype. I would recommend either HTML4.01 Strict, or the H5 DTD.http://www.w3schools.com/html/html_doctype.asphttp://www.w3schools.com/html5/html5_intro.asp
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...