Results 1 to 4 of 4

Thread: Combining Smooth Navigational Elements w/ Current Menu

  1. #1
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Combining Smooth Navigational Elements w/ Current Menu

    1) Script Title: Smooth Navigational Menu (v1.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

    3) Describe problem: I'm currently working on the redesign of a website...
    http://rutholsonphoto.com/testbuild/index.php
    ...and would like to add the drop down hover functionality of this script to my already styled and animated menu.

    Would you have any idea how I would go about doing this?

    NOTE: Let me know if I should supply you with the current html and css.

  2. #2
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I only need one order of sub-menu. Not an endless thread of menus.

    Here's my current HTML, and CSS:

    HTML:
    Code:
    <!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 &copy; 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>
    CSS:
    Code:
    @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;
    }

  3. #3
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    If all you need is one level deep of sub menus, you might try integrating AnyLink CSS Menu with your original menu bar instead, which is a lot easier to do than with Smooth Navigational Menu. The former lets you easily associate a drop down menu to an arbitrary link on the page, or in this case, each link within your menu bar.
    DD Admin

  4. #4
    Join Date
    Aug 2010
    Posts
    37
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    If all you need is one level deep of sub menus, you might try integrating AnyLink CSS Menu with your original menu bar instead, which is a lot easier to do than with Smooth Navigational Menu. The former lets you easily associate a drop down menu to an arbitrary link on the page, or in this case, each link within your menu bar.
    Ok. I'll try this out and see where it gets me. Thanks!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •