Solved

navigation current button

Posted on 2014-04-21
10
187 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
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: 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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)

775 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