Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

navigation current button

I did a navigation bar in Dreamweaver with spry mennu bar. But all the tabs have the same color. Is there a way to replace one of the tabs to a darker color so that the user knows where he/she is (like in the attached pic)? I have the darker color tab.
pic
code for the spry is below:
...
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
...
<tr><td><!-- TABLE 4 -->
                                    <ul id="MenuBar1" class="MenuBarHorizontal">
                                          <li><a href="#">Home</a></li>
                                          <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
                                            <ul>
                                              <li><a class="MenuBarItemSubmenu" href="partners.html">Meet The Partners</a></li>
                                            </ul>
                                          </li>
                                          <li><a href="#">Services</a></li>
                                          <li><a href="#">Contact Us</a></li>
                                          <li><a href="#">Customer Portal</a></li>
                                        </ul>
                                        <script type="text/javascript">
                                        var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", 
										imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                                        </script></td></tr>

Open in new window

0
leblanc
Asked:
leblanc
  • 5
  • 5
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Spry is out of date by at least 2 years.  You would be better off using jquery ui tabs.

In any case, just add a class to the li called current_page

 <li class="current_page"><a href="#">Services</a></li>

Open in new window


Then add css for the class "current_page" for whatever color you want.
0
 
leblancAccountingAuthor Commented:
Can you create another class because I already have a class?

 <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
             <ul><li><a class="MenuBarItemSubmenu" href="partners.html">Meet The Partners</a></li></ul>
</li>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can have a lot of classes.   You need a class to that turns something a different color based on what page it is.

If you have
<div>page 1</div>
<div>page 2</div>
<div>page 3</div>

Open in new window

On page1.html
<div class="current_page">page 1</div>
<div>page 2</div>
<div>page 3</div>

Open in new window

On page2.html
<div>page 1</div>
<div class="current_page">page 2</div>
<div>page 3</div>

Open in new window

On page3.html
<div>page 1</div>
<div>page 2</div>
<div class="current_page">page 3</div>

Open in new window

Then create a css class
.current_page{backround-color:red;}

Open in new window

Now the current page will have a red background for that div.  This is the same way your tabs will work.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
leblancAccountingAuthor Commented:
I did the below int the main html file and it did not work.

<li class=current><a class="MenuBarItemSubmenu" href="#">About Us</a>
             <ul><li><a class="MenuBarItemSubmenu" href="partners.html">Meet The Partners</a></li></ul>
</li>

I added this css code in SpryMenuBarHorizontal.css and it did not work:
.current { backround-color:red;}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I had a typo on background.  The class should be
.current { background-color:red;}

Open in new window

I have it working here http://jsbin.com/kulep/1/edit?html,output
Please post a link to  your test page if that still is not it.
0
 
leblancAccountingAuthor Commented:
I see that it is working for you. But it does not work for me.

This link is my testing code, http://aclarus-solutions.com/testing/about1.html. Thx
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It looks like it is working for you.  You have the the middle li set to current and your css shows a downarrow
.current { background-image:url(images/button_down_arrow.jpg) }

screen
0
 
leblancAccountingAuthor Commented:
It is not working as the About tab is supposed to be darker. Below is the graphic for my down button.
button
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It looks like spry is using old fashioned image backgrounds.  

See this bit of css
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #FFF;
	color: #FFF;
	background-image: url(../images/button_up.jpg);
}

Open in new window

try adding ul.MenuBarHorizontal a.selected.  Then add the selected class to the <a> link of the selected tab.

I do think you are going down the wrong path with spry just because adobe left this in cs5. It shouldn't really be used.
0
 
leblancAccountingAuthor Commented:
I agree. But I am short in time and I need to get something running first before I improve it. I definitely want to try jquery.

I will try your fix in a bit. Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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