Slashdot menu with a second background color

**Niclas** · 03-21-2008, 10:19 AM

Hi

Is there a way to have a second background color in Slashdot menu?
I want to have two sections where the first hover background color is red
and the second section with blue background color..

Is this advanced or have someone already a simple solution?

Best Regards
Nick67

**ddadmin** · 03-21-2008, 04:43 PM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

**Niclas** · 03-22-2008, 12:26 PM

Hi DDadmin,

I really don´t want other users to see url to my websites, but I will add a link below

http://www.strovelstorp.nu/test/iframe/menu.html

My question was if there already is a simple code of javascript in your archive, I want to change the hover background colors in your DD Flashdot menu, ex. blue background colors in first sections, and red background colors in second sections..

Bg NickL

**Niclas** · 03-26-2008, 09:57 AM

Hi DD

Please look att my link abowe, is it possible to have both collapsed when entry the homepage, and then only have 1 expanded at once..

My problem is that the menu collapsed after a visit sublinks..
I want it to be open after visiting.

Best Regards
Niclas

**rangana** · 03-26-2008, 10:52 AM

Find this in your code:

Code:

div.sdmenu div {background: url(title.gif) repeat-x;overflow: hidden;}

This controls the background of the first menu,

Find this in your code:

Code:

div.sdmenu div:first-child {background: url(toptitle.gif) repeat;}

This controls the second menu

If you wish to have a blue and red background respectively, then changing it to background color or a new background instead:

Code:

div.sdmenu div{background:#00f;overflow:hidden;}

Code:

div.sdmenu div:first-child{background:#f00;}

See if it helps

**Niclas** · 03-28-2008, 08:41 AM

Thanks for the code, but my question was if its possible to change the HOVER BACKGROUND COLOR?

Best Regards
Niclas

**codeexploiter** · 03-28-2008, 09:12 AM

You can do that by adjusting the HTML needed for the menu and its CSS a bit

1. You need to assign an ID for the div element on which you are treating as a menu so that we can hook these elements using the ID using CSS.

Code:

	<div class="collapsed" style="" id="blue">
        <span>BLUE SECTION</span>
        <a href="http://www.mindoman.com/">link1</a>
        <a href="http://www.mindoman.com/">link2</a>
        <a href="http://www.mindoman.com/">link3</a>
        <a href="http://www.mindoman.com/">link4</a>
        <a href="http://www.mindoman.com/">link5</a>
        <a href="http://www.mindoman.com/">link6</a>
        <a href="http://www.mindoman.com/">link7</a>
        <a href="http://www.mindoman.com/">link8</a>
      </div>
      <div class="collapsed" style="" id="red">
        <span>RED SECTION</span>
           <a href="http://www.mindoman.com/">link1</a>
        <a href="http://www.mindoman.com/">link2</a>
        <a href="http://www.mindoman.com/">link3</a>
        <a href="http://www.mindoman.com/">link4</a>
        <a href="http://www.mindoman.com/">link5</a>
        <a href="http://www.mindoman.com/">link6</a>
        <a href="http://www.mindoman.com/">link7</a>
        <a href="http://www.mindoman.com/">link8</a>
      </div>

2. In your CSS add CSS related to the different menus using their ID like the following manner

Code:

	div.sdmenu #red a:hover {
		background : #FF4571 url(icons/menu/linkarrow.gif) no-repeat right center;
		color: #fff;
		text-decoration: none;
	}

Note that I haven't created any specific CSS rule for representing blue hover background as it is already there in your CSS. So considered it as the default one but if you want to have more than two background colors for different menu items then you have to create new rules based on the unique ID in the above mentioned manner.

Let me know if you have any questions regarding this.