Solved

navigation current button

Posted on 2014-04-21
10
189 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
output in HTML in Powershell 5 29
ASP.NET data base connection 35 46
CSS question 4 30
Boolean 13 28
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

696 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