[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

navigation current button

Posted on 2014-04-21
10
Medium Priority
?
208 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 54

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 54

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 54

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 54

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

656 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