Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    DHTML & CSS navigation menu system help?

    Hey Everyone,

    Just registered here, looks like a good resource!

    So this is my issue. I've created a menu navigation system using a tutorial I've found on the web. It uses a mixture of DHTML, Javascript, and CSS for it's design and function.

    I've edited it quite a bit to get it to work and look how I want it to, and there are just a few issues I haven't been able to figure out. Hoping there might be a wizard around here who could help out!

    Here is a link to the menu system as it is now. On this html page I have also included the CSS and JS below the actual menu in case anyone would like to view how I have it currently.
    http://www.aardvarkmulti.com/media/menu_test.html

    Attached to this post are also screen shots (menu-ss.gif) of how I would like the end result to appear. (menu-ss2.gif) is how it is currently apppearing.

    Overall, my menu needs the following changes:

    1. When a parent item is selected, I would like the "Grey Rounded Box" image to swap out with a different image. This image will be the same size, but will be a dark red color, vs. the grey color.

    2. When a parent item is selected, and the submenu drops down, there is a white space in between the parent menu image and the dropdown, I would like that white space to be gone. Again, this effect can be seen in the screen shot I have attached.

    3. I would like a small "rounded corner" image to appear at the very bottom of each submenu, giving the effect of the rounded corner on the bottom. Once again, this can be seen in the screenshot gif I have attached to this post.

    I'm sure this can be achieved with some css commands that I'm obviously not aware of, but any help would be Greatly appreciated!!!

    Thanks in advance!
    Attached Thumbnails Attached Thumbnails DHTML & CSS navigation menu system help?-menu-ss2.gif   DHTML & CSS navigation menu system help?-menu-ss.gif  
    Last edited by Thirty Six; 09-21-2007 at 08:59 PM. Reason: added additional thumbnail.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This may help.

    Frank


    Validation Output: 1 Error
    Line 53, Column 23: character "&" is the first character of a delimiter but occurred as data.
    <a href="#">Webcasts & Events</a>✉
    This message may appear in several cases:

    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.

    Line 53, Column 24: XML Parsing Error: xmlParseEntityRef: no name.
    <a href="#">Webcasts & Events</a>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Thirty Six (09-21-2007)

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    This may help.

    Frank


    Validation Output: 1 Error
    Line 53, Column 23: character "&" is the first character of a delimiter but occurred as data.
    <a href="#">Webcasts & Events</a>✉
    This message may appear in several cases:

    You tried to include the "<" character in your page: you should escape it as "&lt;"
    You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
    Another possibility is that you forgot to close quotes in a previous tag.

    Line 53, Column 24: XML Parsing Error: xmlParseEntityRef: no name.
    <a href="#">Webcasts & Events</a>
    Frank, thanks a lot for your suggestions. I will remember those helpful hints.

    However, I'm still looking for a solution, so if anyone has additional ideas or even links that might put me in the right direction please do post them.

    I have also uploaded an additional screenshot/storyboard which might help to understand my dilemma a bit better!

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I am not an expert at css, but I do not recognise the css you give. I always understood that DIV was a html tag, and that the css was in the form
    #Content etc
    or
    .Whatever

    I have not previously seen DIV in a css command.

    I may have missed it, but it is certainly new to me. Most css

    Usually in this form:-

    Frank


    Code:
    
    *{
      margin: 0;
      padding: 0;
    }
    
    
    .p {color:white;}
    #body
      { margin: 0px; padding: 0px; 
      display: inline-block; 
      background-color: #bbb; 
      color:white; } 
    
    .wrapper 
      { text-align: center; 
      background-color: #bbb; 
      color:white; 
      margin-top:0px; } 
    
    .wrapper p 
      { display: inline; 
      font-size:60% } 
    
    .wrapper span 
      { margin: 1em; 
      vertical-align: top; 
      width: 140px; 
      height: 150px; 
      display: inline-block; } 
      
    .wrapper p span 
      { vertical-align: bottom; } 
      
      
    .wrapper p img 
      { margin-bottom: 0px; 
      border: none; 
      margin-top: 0px; } 
      
    .wrapper a 
      { text-decoration:none; 
      color: #000; }  
      
    #main 
      { float: right; 
      width: 750px; } 
      
    #main p 
      { clear: both; 
      width: auto; /* reverting the width set in #content p */ 
      text-align: center; 
      color: #ffffff; } 
      
    #main a 
      img {border: 2px solid white;} 
    
    #main a:hover 
      img {border-color: orange;}
        
    #wrap 
      { position: relative; 
      width: 950px; 
      margin: auto; }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Good eye Frank! I just went into my css form and removed the "div" so now my stylesheets display ".sdmenu" instad of "div.sdmenu"....unfortunately that doesn't resolve the design issues I'm asking about but thanks again for another good suggestion.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Thirty Six View Post
    Good eye Frank! I just went into my css form and removed the "div" so now my stylesheets display ".sdmenu" instad of "div.sdmenu"....unfortunately that doesn't resolve the design issues I'm asking about but thanks again for another good suggestion.
    You do still have the word DIV in your css. I don't know whether it causes any of your problems, but it is worth bearing in mind.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    you'd be better to put your nav menu into a unordered list like this,

    <ul>
    <li>Main item 1</li>
    <li>Main Item 2</li>
    <li>
    <ul>
    <li>sub level flyout 1</li>
    <li>sub level flyout 2</li>
    </ul>

    This would make the first item have no flyout outs and the second item would have two flyouts. look up www.alistapart.com or google suckerfish menu for more detailed instructions.

    bazz

  • Users who have thanked bazz for this post:

    Thirty Six (09-24-2007)

  • #8
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bazz,

    I appreciate your suggestions. However I have already put so much work into this menu system I would love for it to display properly. I have looked into Suckerfish menus and while I think they are good, they don't seem to look and function the same way that this menu system does.

    If anyone has additional suggestions on how I can tweak this CSS to make it display properly I would greatly appreciate it.


  •  

    Posting Permissions

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