5 Replies - 4580 Views - Last Post: 27 April 2010 - 07:45 AM

#1 Guest_Finn*


Reputation:

Have different color tabs in normal state in nav bar

Posted 22 April 2010 - 02:39 PM

Can anyone help a very frustrated me - I want each botton or element on the spry menu bar e.g home button is white, restaurant button is blue, hotels - red etc. I originally created buttons in photoshop and put them into a nav bar individually. Looked good in my browser but crap in college. I also need drop down menu so spry menu bar is better for that. Im very new to all this so need help in little, clear steps!
<ul id="MenuBar1" class="MenuBarHorizontal">
    
    <li><a  href="#" >Home</a>
      
    </li>
	
    <li><a href="#">Shops</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Restaurant</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Chinese</a>
          
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
  </ul>



Code is generated by dreamweaver I haven't styled this yet but have tried various ways to make it different.

I really apprecaite any help. Thanks

Is This A Good Question/Topic? 0

Replies To: Have different color tabs in normal state in nav bar

#2 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Have different color tabs in normal state in nav bar

Posted 23 April 2010 - 02:52 PM

Dreamweaver laid it out correctly for you to set up hover menu dropdowns. For the colors issue, try setting up classes: <a class="green MenuBarItemSubmenu" href="#">Restaurant</a> and <a class="blue MenuBarItemSubmenu" href="#">Chinese</a> then style those classes accordingly.

That's what is so awesome about HTML and CSS is that you can supply multiple classes for elements to be style accordingly.

Do a Google search for "CSS hover dropdown menus" and see what comes up for you.

Hope that helps you out.
Was This Post Helpful? 0
  • +
  • -

#3 Guest_finn*


Reputation:

Re: Have different color tabs in normal state in nav bar

Posted 25 April 2010 - 07:36 AM

Hi I am trying your suggestion but it is not working here is the code I have put in maybe you can spot an obvious error. Thanks
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type = "text/css">
ul li a.home {
	color:f4ebeb;
	text-align: center;
} 
ul li a.yellow {color:eff4ab;} 


</style>
</head>

<body class="twoColLiqLtHdr">

<div id="container"> 
  <div id="header">
    <h1>Header<img src="images/images/header.jpg" width="513" height="69" /></h1>
    
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class = "Home" href ="#">Home</a></li>
      <li><a class = "yellow" href="#">U10 Restaurants</a></li>
      <li><a class="green MenuBarItemSubmenu" href="#">10+ Restaurants</a>
        
          </li>
          
      
      <li><a class = "view MenuBarItemSubmenu" href="#">View All Restaurants</a></li>
      <li><a class = "blue MenuBarItemSubmenu" href="#">U 10 Activities</a></li>
      <li><a class = "red MenuBarItemSubmenu" href="#">10+ Activities</a></li>
      <li><a class = "act MenuBarItemSubmenu" href="#">View All Activities</a></li>
    </ul>
  


As you can see I have only tried the first two but the colour stays the same for both buttons.
Was This Post Helpful? 0

#4 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Have different color tabs in normal state in nav bar

Posted 26 April 2010 - 03:42 PM

The color attribute will change the font color, I think your looking for background-color. Let us know how that works.
Was This Post Helpful? 0
  • +
  • -

#5 Guest_Finn*


Reputation:

Re: Have different color tabs in normal state in nav bar

Posted 27 April 2010 - 07:20 AM

View Postjrm402, on 26 April 2010 - 02:42 PM, said:

The color attribute will change the font color, I think your looking for background-color. Let us know how that works.



Thank you so much - that was the problem. I changed that and added other styling and it looks great now. My lecturer said it wasn't possible to do it so now I feel I have achieved something!
Was This Post Helpful? 0

#6 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Have different color tabs in normal state in nav bar

Posted 27 April 2010 - 07:45 AM

Lol! Great, and it is a very possible thing to do (as you can see now). Doesn't it feel good to out-do the teacher? I got dropped from my XHTML class for doing that :hammer:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1