Results 1 to 7 of 7

Thread: Slashdot menu with a second background color

  1. #1
    Join Date
    Aug 2006
    Location
    Sweden
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Slashdot menu with a second background color

    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

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

    Default

    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.

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    Niclas (04-06-2008)

  4. #3
    Join Date
    Aug 2006
    Location
    Sweden
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Smile

    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

  5. #4
    Join Date
    Aug 2006
    Location
    Sweden
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Expand and Collapse

    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

  6. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. The Following User Says Thank You to rangana For This Useful Post:

    Niclas (04-06-2008)

  8. #6
    Join Date
    Aug 2006
    Location
    Sweden
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Change Hover Background color

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

    Best Regards
    Niclas

  9. #7
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  10. The Following User Says Thank You to codeexploiter For This Useful Post:

    Niclas (04-01-2008)

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
  •