• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

Can someeone help with CSS/JS expanding menu that can also have non-expanding menu items?

I'm trying to modify a menu from this site: http://www.dynamicdrive.com/dynamicindex1/slashdot.htm so that some of the menu items link directly to a web page like "Home Page" and others expand to reveal sub-menu items. The problem I'm having is that as soon as I create a link to a web page the css formats it to look like a sub-menu item and messes up the format as you can see here: http://76.12.38.117/index.htm Can anyone show me how I can mix menu items that connect directly to a page with menu items that have sub-menue items that in tern link to pages.
Menu:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../styles/sdmenu.css" rel="stylesheet" type="text/css">
<div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span><a href="../index.htm">Home</a></span>      </div>
      <div class="collapsed">
        <span>Association Benefits</span>
        <a href="http://www.dynamicdrive.com/recommendit/">Labor Relations</a>
        <a href="http://www.dynamicdrive.com/link.htm">Insurance</a>
        <a href="http://www.dynamicdrive.com/resources/">Worker's Compensation</a>
      </div>
      <div class="collapsed">
        <span>Contractors</span>
        <a href="../index.htm">Membership Directory</a>
        <a href="http://www.cssdrive.com">Members Only</a>      </div>
      <div>
        <span>SFECA Staff</span>      </div>
</div>

CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../styles/sdmenu.css" rel="stylesheet" type="text/css">
<div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span><a href="../index.htm">Home</a></span>      </div>
      <div class="collapsed">
        <span>Association Benefits</span>
        <a href="http://www.dynamicdrive.com/recommendit/">Labor Relations</a>
        <a href="http://www.dynamicdrive.com/link.htm">Insurance</a>
        <a href="http://www.dynamicdrive.com/resources/">Worker's Compensation</a>
      </div>
      <div class="collapsed">
        <span>Contractors</span>
        <a href="../index.htm">Membership Directory</a>
        <a href="http://www.cssdrive.com">Members Only</a>      </div>
      <div>
        <span>SFECA Staff</span>      </div>
</div>

Thanks very much
0
tmtminc
Asked:
tmtminc
  • 4
  • 2
1 Solution
 
oceanbeachCommented:
Hello tmtminc,

Try adding these styles...

for 'benefits'...
#dropmenu #dropmenu1 a {
color: #f00; }

for 'contractors'...
#dropmenu #dropmenu2 a {
color: #ff0; }

I just picked some random text colors.  I hope this helps!

oceanbeach
0
 
tmtmincAuthor Commented:
Hi oceanbeach
Thanks for responding. Sorry, my CSS should have been this:

div.sdmenu {
      width: 200px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      padding-bottom: 10px;
      background: url('../graphics/bottom.gif') no-repeat  right bottom;
      color: #fff;
}
div.sdmenu div {
      background: url('../graphics/title.gif') repeat-x;
      overflow: hidden;
}
div.sdmenu div:first-child {
      background: url('../graphics/toptitle.gif') no-repeat;
}
div.sdmenu div.collapsed {
      height: 25px;
}
div.sdmenu div span {
      display: block;
      padding: 5px 25px;
      font-weight: bold;
      color: white;
      background: url('../graphics/expanded.gif') no-repeat 10px center;
      cursor: default;
      border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
      background-image: url('../graphics/collapsed.gif');
}
div.sdmenu div a {
      padding: 5px 10px;
      background: #394462;
      display: block;
      border-bottom: 1px solid #ddd;
      color: #D5DAE1;
}
div.sdmenu div a.current {
      background : #ccc;
}
div.sdmenu div a:hover {
      background : #D5DAE1 url('../graphics/linkarrow.gif') no-repeat right center;
      color: #fff;
      text-decoration: none;
}

It looks as if everything is treated as first_child. Is there a way to make "Home" not expand, "Benefits" & "Contractors" expand, and "SFECA Staff" not expand?
0
 
oceanbeachCommented:
Hello tmtminc,

Oops, I was looking at the wrong menu.  I see what the problem is now.  Unfortunately, I do not have a suggestion at this time.  I will try to take another look later.

I wish I could have been of more help.

-OB
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
oceanbeachCommented:
Hello tmtminc,

I made some small changes that may work for you...

changed this HTML...
<div style="" class="collapsed">
<span><a class="current" href="http://76.12.38.117/index.htm">Home</a></span>
</div>

to this HTML...
<span class="singlelink"><a class="current" href="#">Home</a></span>

added this CSS...
div.sdmenu span.singlelink a{
      display: block;
      padding: 5px 25px;
      font-weight: bold;
      color: white;
      background: url('../graphics/expanded.gif') no-repeat 10px center;
      cursor: default;
}

This basically removes the surrounding div, assigns a class to the span without a containing div & styles the link to match those links still inside a div.  You can do the same thing to the last link.

I hope this helps!

oceanbeach
0
 
tmtmincAuthor Commented:
Thanks oceanbeach.
0
 
oceanbeachCommented:
Hi tmtminc,

Glad to help!

-OB
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now