psionicsin Posted December 6, 2010 Share Posted December 6, 2010 Currently my HTML code is this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ruth Olson Photography</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="wrapper"> <div id="header"> <div id="nav_container"> <ul id="navMenu"> <li><a href="#" class="normalMenu">Home</a></li> <li><a href="#" class="normalMenu">At A Glance</a></li> <li><a href="#" class="normalMenu">About Us</a></li> <ul class="ddsmoothmenu"> <li><a href="#">About Ruth</a></li> <li><a href="#">About the Staff</a></li> </ul> <li><a href="#" class="normalMenu">Gallery</a></li> <li><a href="#" class="normalMenu">Senior Challenge</a></li> <ul class="ddsmoothmenu"> <li><a href="#">About the Challenge</a></li> <li><a href="#">Vote Now</a></li> </ul> <li><a href="#" class="normalMenu">Prices</a></li> <ul class="ddsmoothmenu"> <li><a href="#">Senior</a></li> <li><a href="#">Children</a></li> <li><a href="#">Family</a></li> <li><a href="#">Pets</a></li> <li><a href="#">Maternity | Newborn</a></li> <li><a href="#">Promo | Business</a></li> <li><a href="#">Special Occasion | Wedding</a></li> <li><a href="#">Products</a></li> </ul> <li><a href="#" class="normalMenu">Contact Us</a></li> <li><a href="#" class="normalMenu">Log-In</a></li> </ul> </div> </div> <div id="main_container"> </div></div><!-- end wrapper --><div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery.ie6blocker.js"></script><script type="text/javascript" src="js/ddsmoothmenu.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html> And my CSS: @charset "utf-8";/* CSS Styling */* { margin: 0; padding: 0;}/* Styling the body */body { margin: 0; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#wrapper {margin: 0pt auto; background: url(images/header_bg.jpg) no-repeat center top; width: 920px; overflow: hidden;}#header { margin: 0 auto; /*height: 68px;*/ height:75px; /*width: 884px;*/ overflow: hidden;}#facebook {}#twitter {}#rss {}/* Styling the Footer */#footer { background: #292929; font-size: 12px; color: white; padding: 5px 0 10px 0; border-top: 2px solid #606060; text-align: center;}/* Styling the Navigation Menu */#nav_container { margin: 46px auto 0; width: 920px; height: 29px;}ul#navMenu { /* the unordered list */ height:/*25px*/ 100%; text-align: center; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold;}ul#navMenu li { display: inline; /* changing the display property */ height: 100%; width: 115px; float: left; /* floating the list items to the left */ list-style-type: none; /* disabling the list icon */ overflow: hidden; /* hiding the overflowing content */}ul#navMenu li a { text-decoration:none; /* removing the underline text-decoration */ display:block; line-height: 29px; height:100%;}/* Styling the links */.normalMenu, .normalMenu:visited,.hoverMenu, .hoverMenu:visited,.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */ outline:none; padding:0px 5px; display:block;}/* Styles that are assigned individually */.hoverMenu,.hoverMenu:visited,.selectedMenu,.selectedMenu:visited { margin-top:-29px; background:url(images/grey_bg.gif) repeat-x #eeeeee; color:#444444;}.selectedMenu,.selectedMenu:visited { margin:0;}.normalMenu, .normalMenu:visited { color:white; font-weight: bold; background:url(images/dark_bg.gif) repeat-x #444444;}/* Styling the Main Content */#main_container { height: 540px; /*width: 800px; margin-top: 68px;*/ margin:0 25px;} I'm trying to make the ul class "ddsmoothmenu" fall under it's respective menu section by using this effect from Dynamic Drive.http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htmI tried a couple of times, but it ended up disastrous. Any ideas on how to implement the sub-menu portion of this menu to my menu? Link to comment Share on other sites More sharing options...
psionicsin Posted December 6, 2010 Author Share Posted December 6, 2010 I know that currently my HTML is correct. I'm just trying to figure out how to rearrange their CSS to make it work to my advantage.I was thinking about: .ddsmoothmenu ul li {position: absolute;left: 0;display: none;visibility: hidden;}.ddsmoothmenu ul li a{display: list-item;float: none;width: npx;padding: 5px;margin: 0;border-top-width: 0px;border-bottom: 1px solid gray;} Link to comment Share on other sites More sharing options...
dsonesuk Posted December 7, 2010 Share Posted December 7, 2010 Looking at dynamicdrive coding, you are assigning the class to the wrong element 'ul' when it should be to the outer container 'nav_container' only.you have 3 options.1) change 'nav_container' to 'smoothmenu1' and adjust css styling you already have to reflect the selector name change, and then add the required class.from <div id="nav_container">to<div id="smoothmenu1" class="ddsmoothmenu">2) add class 'ddsmoothmenu' to 'nav_container' and change the javascript to relate to name change<div id="nav_container" class="ddsmoothmenu">as inddsmoothmenu.init({ mainmenuid: "nav_container", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]})OR 3) this may work, just add the menu controlling div inside the nav container<div id="nav_container"><div id="smoothmenu1" class="ddsmoothmenu"><!-- unordered list code --></div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.