Solved

navigation current button

Posted on 2014-04-21
10
186 Views
Last Modified: 2014-05-01
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
Comment
Question by:leblanc
  • 5
  • 5
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013593
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
 
LVL 1

Author Comment

by:leblanc
ID: 40013775
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013821
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
 
LVL 1

Author Comment

by:leblanc
ID: 40013925
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013928
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 1

Author Comment

by:leblanc
ID: 40013964
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40014026
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
 
LVL 1

Author Comment

by:leblanc
ID: 40014097
It is not working as the About tab is supposed to be darker. Below is the graphic for my down button.
button
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40014116
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
 
LVL 1

Author Comment

by:leblanc
ID: 40014872
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now