Results 1 to 10 of 10

Thread: Smooth Navigational Menu (v2.0)

  1. #1
    Join Date
    Mar 2013
    Location
    AK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smooth Navigational Menu (v2.0)

    1) Script Title:
    Smooth Navigational Menu (v2.0)

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

    3) Describe problem:
    I am very wet behind the ears when it comes to webpages and scripts. I absolutely love the Smooth Navigational Menu (horizontal). Thank you for providing it.

    After fiddling around, I was finally able to get rid of the down arrow for the menu items as each option will have a drop down.

    My issue is that in the horizontal menu bar, I only have 6 items and it seems that the menu items are left justified leaving a large amount of empty space on the right.

    How do I make the items "justified" so that the entire width is taken up and the items are evenly spaced?

    Thank you.

    PS: I did a search and looks like others had this issue with previous versions and some of the solutions suggested arent working.
    Last edited by SKodidine; 03-08-2013 at 06:23 PM. Reason: Added info regarding searching existing posts.

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Please post alink to your site so people can see what you have and what may interfer with the code.

    But a quick look at the code,I would change this part

    Code:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #414141; /*background of menu bar (default state)*/
    width: 100%;
    }
    and give ir a short length like 1000px; to start with.That is what I would begin with but you will probally to make kore then one adjustment to the width
    Thanks,

    Bud

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Determine the width of the horizontal main menu (on DD it is 465px), then add:
    Code:
    style="position: relative; width: 465px; left: 50%; margin-left: -233px"
    to the div for the horizontal menu. The value for the (negative) margin-left equals the width of the horizontal main menu divided by 2 .
    In other words, replace:
    Code:
    <div id="smoothmenu1" class="ddsmoothmenu">
    with:
    Code:
    <!--<div id="smoothmenu1" class="ddsmoothmenu">-->
    <!-- Determine the width of the horizontal main menu (on DD it is 465px), then add: style="position: relative; width: 465px; left: 50%; margin-left: -233px" to the div for the horizontal menu. The value for the (negative) margin-left equals the width of the horizontal main menu divided by 2  -->
    <div id="smoothmenu1" class="ddsmoothmenu" style="position: relative; width: 465px; left: 50%; margin-left: -233px">
    Btw, you don't have to manually remove the arrows for items that don't have submenus. The arrows will disappear automatically.

  4. #4
    Join Date
    Mar 2013
    Location
    AK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your response Bud.

    My site has nothing in it but the Smooth Navigational Menu (V2.0), nothing at all, I am just playing with this menu. No changes after adding width: 1000px;

    Click image for larger version. 

Name:	Menu Test.jpg 
Views:	116 
Size:	36.6 KB 
ID:	4973

    Code:
    .ddsmoothmenu{
    font: bold 12px Verdana;
    background: #414141; /*background of menu bar (default state)*/
    /*width: 100%;*/
    width:1000px;
    }

  5. #5
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I shortened the width of the menu and centered it and brought it down from the top a little

    http://www.web-user.info/test/smooth/index.html

    Is this more what you wanted?
    Thanks,

    Bud

  6. #6
    Join Date
    Mar 2013
    Location
    AK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is what I am looking for Bud. And thank you for your response as well Molendijk. It is centering the menu within the width.

    Please see attached image what I was trying for. Be deafult it seems to be left justified like the top menu in the image, but I am looking for the menu items to be "justified" as in the second menu in the image.

    Thank you.

    Click image for larger version. 

Name:	Menu Test.jpg 
Views:	112 
Size:	19.2 KB 
ID:	4974

  7. #7
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    So you want it to be the full width of the menu as before but you want the links to be wider and equal in size?
    Thanks,

    Bud

  8. #8
    Join Date
    Mar 2013
    Location
    AK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes but not equal in size, It should vary I suppose with the length of the text for each link. Home versus Contact Us, being of different widths.

    An example (and how I found the DD Smooth Navigational Menu) is the website of the local museum. www.anchoragemuseum.org

    Each link text is of different width but they all seem to be spread to the full width of the menu bar. If I had fewer links, how would I still make them use the full width, is my dilemma.
    Last edited by SKodidine; 03-08-2013 at 08:17 PM. Reason: added example site

  9. #9
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    So,you don't have all of the links worked out yet? Or do you.

    It would/could be a waste of time doing anything until you know how manylinks(dropdowns or submenues ) you are planning to make.
    Figure out what you need and go from there.

    Remember thought ,that the right side of the menu will have extra width to accomodate a submenu if there is one at the end this will make the menu look right .
    Thanks,

    Bud

  10. #10
    Join Date
    Mar 2013
    Location
    AK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you Bud. I just got the menus and sub-menus worked out. While at it, I took a rudimentary shortcut to solve my problem, not the most desired nor the most elegant but works.

    I just added a <li>&nbsp;&nbsp;</li> between the menu items to space them out evenly. A rookie solution but works nonetheless.

    Attached is an image of the menu with spaces as mentioned above.

    Any suggestion as to how a pro would have approached the issue?

    Click image for larger version. 

Name:	Menu Test.jpg 
Views:	124 
Size:	18.2 KB 
ID:	4975

Similar Threads

  1. Smooth Navigational Menu
    By BabaJoe in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-29-2012, 09:42 AM
  2. Smooth Navigational Menu
    By abi in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-05-2012, 11:22 AM
  3. Smooth Navigational Menu Help!
    By Ronnyjaymes in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-13-2010, 09:30 PM
  4. Smooth Navigational Menu (v1.4) Bug
    By Grouchy Old Man in forum Bug reports
    Replies: 3
    Last Post: 04-14-2010, 05:36 PM
  5. Smooth Navigational Menu
    By answerhtink in forum Looking for such a script or service
    Replies: 0
    Last Post: 01-22-2010, 05:50 PM

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
  •