Persistent page indicator

Hi,
I've configured the P7 CSS express with drop down menus to way I want them to look and everything is working fine but I can't figure how to get a persistent page indicator to work, can someone show me the way please.
I'm using Dreamweaver 8.
Thanks in advance
Pete

Let's say your menu looks like this:
HOME | ABOUT | SERVICES | CONTACT
Define a CSS body and link class for each menu item like this:.
body.home a.home, body.about a.about, body.services a.services, body.contact a.contact {
color: red;
text-decoration: underline;
background: yellow;
HTML:
Add a body class to each of your web pages.
On your index page, replace <body> with <body class="home">
On your about page, replace <body> with <body class="about"> and so on...
Then add a class to each link in your menu like so:
<ul>
<li><a class="home" href="index.html">HOME</a></li>
<li><a class="about" href="about.html">ABOUT</a></li>
<li><a class="services" href="services.html">SERVICES</a></li>
<li><a class="contact" href="contact.html">CONTACT</a></li>
</ul>
That's about it.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

Button state for persistent page indicator

Hi,
I posted earlier regarding buttons on my navigation bar to remain in down state while the vistor is on that page. Some helpful links to sites have been suggested and I know I should be using CSS but I'm really struggling and I'm almost our of time, is there a way I can alter the state in Dreamweaver? as a tempary fix, ( and yes, I'll use CSS in future) currently I've gone to the behaviors panel in Dreamweaver where I can select each button and tick show "Down image initially" and that works fine until you use the go back one page in the browser, the previous page comes up but showing the "down state" of the page you had just visited!
Can anybody help me out with a temp fix please? This what I'm trying to achieve: http://www.hunterholden.com.au/
Many thanks.
Pete

Sorry Murray, I must be doing some real dumb! ....I can't get this thing to work, do I still need to do anything in behaviors in Dreamweaver?
Would be grateful if you could look at my code if you have time. (see below).
Thanks in advance
Pete
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">

function P7_downImage() {
var g7="<hunter_mini_navbar_top_r1_c2>"
var g7url="<images/hunter_mini_navbar_top_r1_c2_f3.jpg>"
if ((g7=MM_findObj(g7))!=null) {g7.src=g7url;}
</script>
</head>
<body onload="P7_downImage()
MM_preloadImages('images/hunter_mini_navbar_top_r1_c2_f3.jpg','images/hunter_mini_navbar_t op_r1_c2_f2.jpg','images/hunter_mini_navbar_top_r1_c2_f4.jpg','images/hunter_mini_navbar_t op_r1_c3_f3.jpg','images/hunter_mini_navbar_top_r1_c3_f2.jpg','images/hunter_mini_navbar_t op_r1_c3_f4.jpg','images/hunter_mini_navbar_top_r1_c4_f3.jpg','images/hunter_mini_navbar_t op_r1_c4_f2.jpg','images/hunter_mini_navbar_top_r1_c4_f4.jpg','images/hunter_mini_navbar_t op_r1_c5_f3.jpg','images/hunter_mini_navbar_top_r1_c5_f2.jpg','images/hunter_mini_navbar_t op_r1_c5_f4.jpg','images/hunter_mini_navbar_top_r1_c6_f3.jpg','images/hunter_mini_navbar_t op_r1_c6_f2.jpg','images/hunter_mini_navbar_top_r1_c6_f4.jpg','images/hunter_mini_navbar_t op_r1_c7_f3.jpg','images/hunter_mini_navbar_top_r1_c7_f2.jpg','images/hunter_mini_navbar_t op_r1_c7_f4.jpg','images/hunter_mini_navbar_top_r1_c8_f3.jpg','images/hunter_mini_navbar_t op_r1_c8_f2.jpg','images/hunter_mini_navbar_top_r1_c8_f4.jpg')">
<table width="766" height="92" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td><table border="0" cellpadding="0" cellspacing="0" width="954">
      
      <tr>
        <td><img src="images/spacer.gif" width="5" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="71" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="110" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="121" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="145" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="145" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="157" height="1" border="0" alt="" /></td>
        <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
      <tr>
        <td><img src="images/hunter_mini_navbar_top_r1_c1.jpg" alt="" name="hunter_mini_navbar_top_r1_c1" width="5" height="34" border="0" id="hunter_mini_navbar_top_r1_c1" /></td>
        <td><a href="fireworks_nav_bar.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c2','images/hunter_mini_navbar_ top_r1_c2_f2.jpg','images/hunter_mini_navbar_top_r1_c2_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c2','images/hunter_mini_n avbar_top_r1_c2_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c2.jpg" alt="" name="hunter_mini_navbar_top_r1_c2" width="71" height="34" border="0" id="hunter_mini_navbar_top_r1_c2" /></a></td>
        <td><a href="page 1.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c3','images/hunter_mini_navbar_ top_r1_c3_f2.jpg','images/hunter_mini_navbar_top_r1_c3_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c3','images/hunter_mini_n avbar_top_r1_c3_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c3.jpg" alt="" name="hunter_mini_navbar_top_r1_c3" width="110" height="34" border="0" id="hunter_mini_navbar_top_r1_c3" /></a></td>
        <td><a href="Page 2.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c4','images/hunter_mini_navbar_ top_r1_c4_f2.jpg','images/hunter_mini_navbar_top_r1_c4_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c4','images/hunter_mini_n avbar_top_r1_c4_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c4.jpg" alt="" name="hunter_mini_navbar_top_r1_c4" width="121" height="34" border="0" id="hunter_mini_navbar_top_r1_c4" /></a></td>
        <td><a href="Page 3.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c5','images/hunter_mini_navbar_ top_r1_c5_f2.jpg','images/hunter_mini_navbar_top_r1_c5_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c5','images/hunter_mini_n avbar_top_r1_c5_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c5.jpg" alt="" name="hunter_mini_navbar_top_r1_c5" width="145" height="34" border="0" id="hunter_mini_navbar_top_r1_c5" /></a></td>
        <td><a href="holden_extra_value.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c6','images/hunter_mini_navbar_ top_r1_c6_f2.jpg','images/hunter_mini_navbar_top_r1_c6_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c6','images/hunter_mini_n avbar_top_r1_c6_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c6.jpg" alt="" name="hunter_mini_navbar_top_r1_c6" width="145" height="34" border="0" id="hunter_mini_navbar_top_r1_c6" /></a></td>
        <td><a href="view_cars.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c7','images/hunter_mini_navbar_ top_r1_c7_f2.jpg','images/hunter_mini_navbar_top_r1_c7_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c7','images/hunter_mini_n avbar_top_r1_c7_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c7.jpg" alt="" name="hunter_mini_navbar_top_r1_c7" width="100" height="34" border="0" id="hunter_mini_navbar_top_r1_c7" /></a></td>
        <td><a href="contact_us.html" target="_top" onmouseout="MM_nbGroup('out');" onmouseover="MM_nbGroup('over','hunter_mini_navbar_top_r1_c8','images/hunter_mini_navbar_ top_r1_c8_f2.jpg','images/hunter_mini_navbar_top_r1_c8_f4.jpg',1);" onclick="MM_nbGroup('down','navbar1','hunter_mini_navbar_top_r1_c8','images/hunter_mini_n avbar_top_r1_c8_f3.jpg',1);"><img src="images/hunter_mini_navbar_top_r1_c8.jpg" alt="" name="hunter_mini_navbar_top_r1_c8" width="100" height="34" border="0" id="hunter_mini_navbar_top_r1_c8" /></a></td>
        <td><img src="images/hunter_mini_navbar_top_r1_c9.jpg" alt="" name="hunter_mini_navbar_top_r1_c9" width="157" height="34" border="0" id="hunter_mini_navbar_top_r1_c9" /></td>
        <td><img src="images/spacer.gif" width="1" height="34" border="0" alt="" /></td>
      </tr>
    </table></td>
</tr>
</table>
</body>
</html>

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Azure VM persistent page blob disks appear not to deliver 500 IOPs or 60 MB/s as expected

I need to benchmark Azure standard A3 and A4 VMs to see if I can get the advertised
500 IOPs -
60 MB/s per disk.
I'm aware of the 20k maximum IOPS per standard storage account. The following VM test is done in its own (standard) storage account.
I tested a new standard A3 VM that comes with 4 cores, 7 GB RAM, and up to 8x 1TB persistent HDD disks delivering 500 IOPS or 60MB/s each.
I created and used the following script to provision and attach 8x disk to the VM, Powershell into the VM, create a Storage Space - simple, 8 columns, 128k interleave (to make a 1MB stripe - best suited for the anticipated workload):
$SubscriptionName = '####Removed####'
$StorageAccount = 'testdisks1storageaccount'
$VMName = 'testdisks1vm'
$ServiceName = 'testdisks1cloudservice'
$PwdFile = ".\$VMName-####Removed####.txt"
$AdminName = '####Removed####'
# Pick Storage Account
Set-AzureSubscription -SubscriptionName $SubscriptionName -CurrentStorageAccount $StorageAccount
# Create and attach 8x 1TB disks
0..7 | % { $_
Get-AzureVM -ServiceName $ServiceName -Name $VMName |
Add-AzureDataDisk -CreateNew -DiskSizeInGB 1023 -DiskLabel "Disk$_" -LUN $_ |
Update-AzureVM
# Remote to the VM and creacte storage space:
$objVM = Get-AzureVM -Name $VMName -ServiceName $ServiceName
$VMFQDN = (Get-AzureWinRMUri -ServiceName $ServiceName).Host
$Port = (Get-AzureWinRMUri -ServiceName $ServiceName).Port
# Get certificate for Powershell remoting to the Azure VM if not installed already
Write-Verbose "Adding certificate 'CN=$VMFQDN' to 'LocalMachine\Root' certificate store.."
$Thumbprint = (Get-AzureVM -ServiceName $ServiceName -Name $VMName |
select -ExpandProperty VM).DefaultWinRMCertificateThumbprint
$Temp = [IO.Path]::GetTempFileName()
(Get-AzureCertificate -ServiceName $ServiceName -Thumbprint $Thumbprint -ThumbprintAlgorithm sha1).Data | Out-File $Temp
$Cert = New-Object System.Security.Cryptography.X509Certificates.X509Certificate2 $Temp
$store = New-Object System.Security.Cryptography.X509Certificates.X509Store "Root","LocalMachine"
$store.Open([System.Security.Cryptography.X509Certificates.OpenFlags]::ReadWrite)
$store.Add($Cert)
$store.Close()
Remove-Item $Temp -Force -Confirm:$false
# Attempt to open Powershell session to Azure VM
Write-Verbose "Opening PS session with computer '$VMName'.."
if (-not (Test-Path -Path $PwdFile)) {
Write-Verbose "Pwd file '$PwdFile' not found, prompting to pwd.."
Read-Host "Enter the pwd for '$AdminName' on '$VMFQDN'" -AsSecureString |
ConvertFrom-SecureString | Out-File $PwdFile
$Pwd = Get-Content $PwdFile | ConvertTo-SecureString
$Cred = New-Object -TypeName System.Management.Automation.PSCredential -ArgumentList $AdminName, $Pwd
$Session = New-PSSession -ComputerName $VMFQDN -Port $Port -UseSSL -Credential $Cred -ErrorAction Stop
# Check available disks:
$ScriptBlock = { Get-PhysicalDisk -CanPool $True }
$Result = Invoke-Command -Session $Session -ScriptBlock $ScriptBlock
$Result | sort friendlyname | FT -a
<#
FriendlyName CanPool OperationalStatus HealthStatus Usage Size PSComputerName
PhysicalDisk2 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk3 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk4 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk5 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk6 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk7 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk8 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
PhysicalDisk9 True OK Healthy Auto-Select 1023 GB testdisks1cloudservice.cloudapp.net
#>
# Create Storage Space with 8 disks, optimize for 1MB stripe
$ScriptBlock = {
$PoolName = "VeeamPool2"
$vDiskName = "VeeamVDisk2"
$VolumeLabel = "VeeamRepo2"
New-StoragePool -FriendlyName $PoolName -StorageSubsystemFriendlyName “Storage Spaces*” -PhysicalDisks (Get-PhysicalDisk -CanPool $True) |
New-VirtualDisk -FriendlyName $vDiskName -UseMaximumSize -ProvisioningType Fixed -ResiliencySettingName Simple -NumberOfColumns 8 -Interleave 128KB |
Initialize-Disk -PassThru -PartitionStyle GPT |
New-Partition -AssignDriveLetter -UseMaximumSize |
Format-Volume -FileSystem NTFS -NewFileSystemLabel $VolumeLabel -AllocationUnitSize 64KB -Confirm:$false
Get-VirtualDisk | select FriendlyName,Interleave,LogicalSectorSize,NumberOfColumns,PhysicalSectorSize,ProvisioningType,ResiliencySettingName,Size,WriteCacheSize
$Result = Invoke-Command -Session $Session -ScriptBlock $ScriptBlock
$Result
<#
DriveLetter FileSystemLabel FileSystem DriveType HealthStatus SizeRemaining Size PSComputerName
F VeeamRepo2 NTFS Fixed Healthy 7.98 TB 7.98 TB testdisks1clouds...
FriendlyName : VeeamVDisk2
Interleave : 131072
LogicalSectorSize : 512
NumberOfColumns : 8
PhysicalSectorSize : 4096
ProvisioningType : Fixed
ResiliencySettingName : Simple
Size : 8778913153024
WriteCacheSize : 0
PSComputerName : testdisks1cloudservice.cloudapp.net
RunspaceId : 36930724-4ed4-4813-a8d5-1a8b56b0b1da
#>
Then I RDP'd into the VM, and ran IOMeter to test the IO performance of the disk I just created. According to Microsoft documentation I'm expecting to see 4K IOPS or 480 MB/s throughput (8x disks x 500 IOPS or 60 MB/s each)
I got:
1.3K IOPS instead of 4k, and ~85MB/s instead of 480MB/s.
I've used all 4 workers (cores) to test, and saturated the disk queue with 20 concurrent IOs (see disk queue length on the bottom right part of the image). I tested with a single IO profile: 64K blocks 50% read/50% write which is the IO profile of the anticipated
workload for this VM.
This is East US 2 region.
This is consistent with other people's findings like this post.
I also tested using the 8 disks as a striped disk in Windows. I removed the volume, vDisk, Storage Space, then provisioned a traditional RAID 0 striped disk in this Windows Server 2012 R2 VM. Results were slightly better:
This is still far off the expected 4k IOPS or 480 MB/s I should be seeing here.
My question is:
What do I need to do to get this 4k IOPS or 480 MB/s IO performance in standard A3 VM? Or what's the recommended configuration to get this promised performance?
Sam Boutros, Senior Consultant, Software Logic, KOP, PA http://superwidgets.wordpress.com (Please take a moment to Vote as Helpful and/or Mark as Answer, where applicable) _________________________________________________________________________________
Powershell: Learn it before it's an emergency http://technet.microsoft.com/en-us/scriptcenter/powershell.aspx http://technet.microsoft.com/en-us/scriptcenter/dd793612.aspx

OK. BTW, I upgraded this US East 2 region VM to A4, deleted the storage space and retested with a 16-disk, 16-column space. I got exactly twice the performance (2.6k IOPS, 175 MB/s).
See this post for more details.
I repeated the test on another A4 VM in US East region. This was even worse. Showing 1.7k IOPS, 100 MB/s in 16-disk / 16-column storage space disk testing..
Sam Boutros, Senior Consultant, Software Logic, KOP, PA http://superwidgets.wordpress.com (Please take a moment to Vote as Helpful and/or Mark as Answer, where applicable) _________________________________________________________________________________
Powershell: Learn it before it's an emergency http://technet.microsoft.com/en-us/scriptcenter/powershell.aspx http://technet.microsoft.com/en-us/scriptcenter/dd793612.aspx

Current page indicator w/ DWCS5 templates and Spry

Tried making an id of durrent state, added the rule to spry.css, and did the editable atrribute for the nav. Put in current, and nothing happened on the page I wanted the current ling highlighted.
Also saw info. about the sprydomutilities, but I need more info on that if that.
Tried defining a body and link class for each menu item. Grouped all of them on stylesheet. Again, did the editable atrribute feature, nad still nothing.

Have a look here http://forums.adobe.com/thread/837560?tstart=0
Gramps

How to show active page in Spry Menu Bar using images

Hi,
I have already read this answer "how to show active page in spry menu bar" but I am using images, not text. I have mouse-over and mouse-out working in the Spry Menu Bar using image.png and image-over.png, but I cant' figure out how to get the image-over.png to appear on the active page since the spry menu bar is locked on the individual pages. (I tried to put it in an editable comment, but spry wouldn't go for it. :-)
Any ideas. Here is the code:
<ul id="MenuBar1" class="MenuBarHorizontal">
       <li><a href="../index.html" id="home" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../images/all_pages/home-over.png',1 )"><img src="../images/all_pages/home.png" alt="Home Page" name="home" width="58" height="20" border="0" id="Image8" /></a></li>
       <li><a href="../show.html" id="show" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('show','','../images/all_pages/show-over.png',1)"><img src="../images/all_pages/show.png" alt="The Show" name="show" width="101" height="20" border="0" id="show" /></a></li>
        <li><a href="../team.html" id="team" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','../images/all_pages/team-over.png',1)"><img src="../images/all_pages/team.png" alt="The Team" name="team" width="97" height="20" border="0" id="team" /></a></li>
        <li><a href="../company.html" id="company" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('company','','../images/all_pages/company-over.png',1)"><img src="../images/all_pages/company.png" alt="The Company" name="company" width="139" height="25" border="0" id="company" /></a></li>
        <li><a href="../beatles-tickets.html" id="tickets" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tickets','','../images/all_pages/tickets-over.png',1)"><img src="../images/all_pages/tickets.png" alt="Tickets" name="tickets" width="75" height="20" border="0" id="tickets" /></a></li>
        <li><a href="../media.html" id="media" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','../images/all_pages/media-over.png',1)"><img src="../images/all_pages/media.png" alt="Media" name="media" width="61" height="20" border="0" id="media" /></a></li>
        <li><a href="../news-reviews.html" id="news" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news_reviews','','../images/all_pages/news_reviews-over.png',1 )"><img src="../images/all_pages/news_reviews.png" alt="News-Reviews" name="news_reviews" width="149" height="20" border="0" id="news_reviews" /></a></li>
        <li class="MenuBarHorizontal"><a href="../contact.html" id="contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/all_pages/contact-over.png',1)"><img src="../images/all_pages/contact.png" alt="Contact Us" name="contact" width="79" height="20" border="0" id="contact" /></a></li>
     </ul>
Thanks so much for helping!
Cheers,
Janell

Just found this page:
Persistent Page Indicator
Update: Drat, it is for text menus only not using images. :-(
Cheers,
Susan

How do you add a class in fluid grid navigation menu to change the background and link color when page is active?

When i try to add a class to the active page to have it distinguished when a visitor is on, in the class section it only has other options and not one for "active"

See this link:
Making a persistent page indicator on site wide CSS Menus
Nancy O.

Using Spry Vertical Navigation with Templates-Need to indicate current page

Using Spry Vertical Navigation with the Dreamweaver templates. Using editable attributes etc., the current page mennu item does not seem to be changing. How do you indicate the. current page.

Persistent Page Indicator on Site Wide CSS Menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Update on all pages but still editable

I have a navigation bar that is slightly different for each page of the site. Based on the current page you are on, the corresponding navigation button is "pressed". The problem is that I need to change parts of the entire navigation bar a lot. For example, I may need to add a new button, or change the name on something. Is there any way to update all the pages, but still maintain the ability to edit them? It seems that when I try to use a template in order for it to update I cannot then customize it on specific pages.

A persistent page indicator on your site-wide menu would be a better option. That way you don't need to customize menus on each page.
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
DW Templates are OK for small sites -- under 50 pages. But you must re-publish every page that uses the Template.
Look at Server-Side Includes. With SSIs you open the file containing your menu HTML. Make changes. Save and upload to server. Done! A huge timesaver.
Server-Side Includes
http://www.smartwebby.com/web_site_design/server_side_includes.asp
More on Server-Side Includes
http://forums.adobe.com/message/2112460#2112460
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How do I show what menu title is active, e.g. current page, in spry navigation?

How do I show what menu title is active, e.g. current page, in spry navigation?
See website http://dorsay-easton-indian-law.com/index.html
I want to have Home menu title have a different color when on index.html and so on. I keep using the term "active" for that, and "hover" for mouseover. Is that correct? And what do I need to do so that my menu displays an indication of which page is the current one?

The CSS pseudo-classes in order are:
a = any link
a:link = an unvisited link (normal state)
a:visited = a link after it has been visited
a:hover = on mouseover
a:active = on click
a:focus = reached with tab key
See persistent page indicator on menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Adding a breadcrumb for multiple image pages

I'm using a body class tag to highlight each page in the navigation when it loads (i.e., ".oneColFixCtrHdr photos" would change the Photos text in the nav bar from black to white when on that page). Is there also a way to do this with multiple pages within the Photos page similiar to a search engine in another div at bottom of pages (i.e., back 1 2 3 4 5 6 7 next)?
Thanks,
John

Step #1 Create pages:
Open photo gallery page1.
SaveAs page1.shtml
SaveAs page2.shtml and so on to create all your gallery pages.
Step #2 Create a server-side include file.
Open a new blank html document in code view. Delete all code from the page and add this:
<p>1 | 2 | 3 | 4 | 5 | 6</p>
Link the numbers to your newly created gallery pages.
SaveAs photo-menu.html
Step #3 Insert SSI into gallery pages.
Open each of your gallery pages in code view.
Place your cursor between the last image </div> and the opening footer <div>.
Paste the following code into each gallery page & save.

Upload gallery.shtml pages and photo-menu include file to your remote server to test.
NOTE: If you want to inspect server-side includes in your local browser, you'll need to install and define a local testing server such as Wamp or Xampp (see screenshot).
Finally, to add persistent menu highlighting or "you are here," see this tutorial:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.

Current link status within sidebar editable region library item

Hello,
I have looked all around and am still at a loss on how to address this issue. I would like the current page to be highlighted white when it is clicked on, although I am having no success. The user should see the "Into" link in white on this link: http://www2.biochem.wisc.edu/projectcrystal/la-Introduction-to-basic-chemistry.html
Thanks from a Dw beginner,
Dan
And, here is the code for this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Project CRYSTAL: Crystallographers Researching with Young Scientists: Teaching and Learning</title>
<script src="/projectcrystal/Scripts/swfobject_modified.js" type="text/javascript"></script>

<link href="/projectcrystal/style.css" rel="stylesheet" type="text/css">







<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="/projectcrystal/Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin .js" type="text/javascript"></script>
<script src="/projectcrystal/Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin .js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#cccccc;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 16px;
    font-style: normal;
    padding:0;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
    width: 100%;
    float: left;
    color: #000;
    text-align: left;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    background-color:#cccccc;
    padding-top: 0px;
    padding-right: 22px;
    padding-bottom: 0px;
    padding-left: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #000;
#MenuBar .MenuItemFirst {
    border-style: none none none none;
#MenuBar .MenuItemLast {
    border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#000;
    background-color:#cccccc;
    width: 10em;
    width:auto;
    padding-top: 6px;
    padding-right: 15px;
    padding-bottom: 6px;
    padding-left: 30px;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:#ffffff;
    padding:0px 2px 0px 0px;
    border-width:1px;
    border-color: #cccccc #cccccc #cccccc #cccccc;
    /* Border styles are overriden by first and last items */
    border-style: solid solid none solid;
    color: #000;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:left;
    line-height:1em;
    background-color:#ffffff;
    color:#000;
    padding: 6px 12px 6px 5px;
    width: 7em;
    width:auto;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #999;
    border-top-color: #999;
    border-right-color: #999;
    border-bottom-color: #999;
    border-left-color: #999;
    color: #FFF;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #999999; /* consider exposing this prop separately*/
    color: #FFF;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #999999;
    color: #FFF;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #999;
    border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #999;
    color: #FFF;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #ffffff;
    min-width:100%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #ffffff #ffffff #ffffff #ffffff;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #ffffff;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: #999999; /* consider exposing this prop separately*/
    color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: #cccccc; /* consider exposing this prop separately*/
    color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
a:active {
    color: #FFF;
    text-decoration: underline;
a:hover {
    color: #FFF;
    text-decoration: underline;
h4 {
    color: #3E8012;
    font-size: 35px;
    background-image: url(/projectcrystal/check-icon-for-h4-heading.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 70px;
a:visited {
    color: #23998C;
    text-decoration: underline;
a:link {
    text-decoration: underline;
</style>
<script type="text/xml">

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="wrapper">
<div id="header"><a href="/projectcrystal/index.html"><img src="/projectcrystal/Local Site Folder/Images/header_logo_nsf_final.jpg" width="83" height="95" alt="project CRYSTAL logo">
<h1>Project CRYSTAL</h1>
<h2>Crystallographers Researching with Young Scientists: Teaching And Learning</h2></a>
</div>

<ul id="MenuBar">
<li> <span class="MenuBar"><a href="/projectcrystal/index.html" class="MenuBar">HOME</a></span></li>
<li><a href="/projectcrystal/learn-along-with-young-scientists.html" class="MenuBar">LEARN ALONG WITH YOUNG SCIENTISTS</a>
    <ul>
      <li><a href="/projectcrystal/la-Introduction-to-basic-chemistry.html">Introduction into Basic Chemistry</a></li>
      <li><a href="/projectcrystal/la-the-structures-of-atoms.html">The Structures of Atoms</a></li>
      <li><a href="/projectcrystal/la-dna-part-one-properties-and-structures.html">DNA Part One: Properties and Structure</a></li>
      <li><a href="/projectcrystal/la-dna-part-two-replication.html">DNA Part Two: Replication</a></li>
      <li><a href="/projectcrystal/la-dna-part-three-transcription-translation-and-protein-structure.h tml">DNA Part Three: Transcription, Translation and Protein Structure</a></li>
    </ul>
</li>
<li><a href="/projectcrystal/modules.html" class="MenuBar">MODULES</a>
    <ul>
      <li><a href="/projectcrystal/m-cos-home.html">The Chemistry of Sugars</a>
        <ul>
          <li><a href="/projectcrystal/m-cos-atomsandmatter.html" class="MenuBar">Atoms and Matter</a></li>
          <li><a href="/projectcrystal/m-cos-theperiodictable.html" class="MenuBar">The Periodic Table</a></li>
          <li><a href="/projectcrystal/m-cos-bonding.html" class="MenuBar">Bonding</a></li>
          <li><a href="/projectcrystal/m-cos-importanceofsugars.html" class="MenuBar">Importance of Sugars</a></li>
          <li><a href="/projectcrystal/m-cos-foodandnutrition.html" class="MenuBar">Food and Nutrition</a></li>
          <li><a href="/projectcrystal/m-cos-unusualsugars.html" class="MenuBar">Unusual Sugars</a></li>
          <li><a href="/projectcrystal/m-cos-modeling.html" class="MenuBar">Modeling</a></li>
          </ul>
        </li>
      <li><a href="/projectcrystal/m-cof-home.html">The Chemistry of Fats</a>
        <ul>
          <li><a href="/projectcrystal/m-cof-atomsandmatter.html" class="MenuBar">Atoms and Matter</a></li>
          <li><a href="/projectcrystal/m-cof-theperiodictable.html"class="MenuBar">The Periodic Table</a></li>
          <li><a href="/projectcrystal/m-cof-bonding.html" class="MenuBar">Bonding</a></li>
          <li><a href="/projectcrystal/m-cof-typesof_fats.html" class="MenuBar">Types of Fats</a></li>
          <li><a href="/projectcrystal/m-cof-steroids.html" class="MenuBar">Steroids</a></li>
          <li><a href="/projectcrystal/m-cof-cholesterol.html" class="MenuBar">Cholesterol</a></li>
          <li><a href="/projectcrystal/m-cof-importanceof_fats.html" class="MenuBar">Importance of Fats</a></li>
          <li><a href="/projectcrystal/m-cof-thecellmembrane.html" class="MenuBar">The Cell Membrane</a></li>
          </ul>
        </li>
      <li><a href="/projectcrystal/m-cop-home.html">The Chemistry of Proteins</a>
        <ul>
          <li><a href="/projectcrystal/m-cop-atomsandmatter.html"class="MenuBar">Atoms and Matter</a></li>
          <li><a href="/projectcrystal/m-cop-theperiodictable.html" class="MenuBar">The Periodic Table</a></li>
          <li><a href="/projectcrystal/m-cop-bonding.html"class="MenuBar">Bonding</a></li>
          </ul>
        </li>
      </ul>
</li>
<li><a href="/projectcrystal/holdenlab-home.html" class="MenuBar">HOLDEN LAB</a>
    <ul>
      <li><a href="/projectcrystal/hl-newsworthy.html">Newsworthy</a></li>
      <li><a href="/projectcrystal/hl-xraycrystallography.html">X-ray Crystallography</a></li>
      <li><a href="/projectcrystal/hl-sugarchemistry.html">Sugar Chemistry</a></li>
      <li><a href="/projectcrystal/hl-labmembers.html">Lab Members</a>
        <ul>
          <li><a href="/projectcrystal/hl-lm-graduatestudents.html">Graduate Students</a></li>
          <li><a href="/projectcrystal/hl-lm-highschoolinterns.html">High School Interns</a></li>
          <li><a href="/projectcrystal/hl-lm-projectcrystal.html">Project CRYSTAL</a></li>
        </ul>
      </li>
    </ul>
</li>
<li><a href="/projectcrystal/contactus.html" class="MenuBar">CONTACT</a></li>
</ul>
<ul>
<ul>
    <ul>
      <ul>
        </ul>
      </ul>
    </ul>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
      widgetID: "MenuBar",
      widgetClass: "MenuBar MenuBarLeftShrink",
      insertMenuBarBreak: true,
      mainMenuShowDelay: 100,
      mainMenuHideDelay: 200,
      subMenuShowDelay: 200,
      subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<div id="sidebar">
    <div class="top"></div>
    <div class="content"> 
<style type="text/css">
a:link {
    color: #23998C;
a:visited {
    color: #23998C;
a:hover {
    color: #FFF;
</style>
<h1>Learn Along Lessons</h1>
    <p><a href="/projectcrystal/la-Introduction-to-basic-chemistry.html">Introduction to Basic Chemistry</a></p>
    <p><a href="/projectcrystal/la-the-structures-of-atoms.html">The Structures of Atoms</a></p>
    <p><a href="/projectcrystal/la-dna-part-one-properties-and-structures.html">DNA Part One: Properties and Structures</a></p>
<p><a href="/projectcrystal/la-dna-part-two-replication.html">DNA Part Two: Replication</a></p>
<p><a href="/projectcrystal/la-dna-part-three-transcription-translation-and-protein-structure.h tml">DNA Part Three: Transcription, Translation and Protein Structure</a></p>
</div>
    <div class="bottom"></div>
</div>
<div id="main">
    <div class="top"></div>
    <div class="content">
    
    <h1>Learn Along</h1>
    <h2>Introduction to Basic Chemistry</h2>
    <p>
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="500">
        <param name="movie" value="/projectcrystal/LA_Introduction_to_Basic_Chemistry.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="/projectcrystal/Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="/projectcrystal/LA_Introduction_to_Basic_Chemistry.swf" width="700" height="500">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="/projectcrystal/Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
          
        </object>
        
      </object>
    </p>
    </div>
    <div class="bottom"></div>
</div><div id="pulldown"></div>
</div>
<div id="footer">
<p>Copyright © 2011 The Board of Regents of the University of Wisconsin System<br>
    Last updated:
    July 26, 2011
    <script type="text/javascript">
swfobject.registerObject("FlashID");
    </script>
    <br>
    Feedback, questions, or accessibility issues: [email protected]<br>
</p>
</div>

</body>


I would like the current page to be highlighted white when it is clicked on,
Here's one method
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

How can I get Navigation Menu Button to remain in down state after clicked?

Hi there,
I'm messing about with a Navigation Menu and would like to click on the button and once clicked, the button remains in its down state. I can't seem to find a way of doing this? Any pointers?
Cheers

We would need to see your live page and code to offer more meaningful answers. But I wonder if what you really want is a "persistent page indicator" on your nav menu?
HOME | PRODUCTS | CONTACT US
When you're on the Home page, the HOME menu is highlighted.
HOME | PRODUCTS | CONTACT US
When you're on the Products page, the PRODUCTS menu is highlighted. And so on...
See this related discussion -
http://forums.adobe.com/message/2398026#2398026
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Spry menu bar in iOS

My web pages use a spry menu bar for navigation. The menu bar is OK in Mac OS X but won't function properly when used by iOS on iPads and iPhones. What modifications do I need to make. Or what other navigation bar should I use?

JQuery is quite a common substitute, but you can do wonders with a simple HTML/CSS only menu.
jMenu jQuery plugin : Demonstration - Horizontal navigation with unlimited sub-menus with jQuery : MyjQueryPlugins.com
Here's an HTML/CSS only version with a persistent page indicator to show the visitor which page they are on
(view the source code) Home Page :: Kards by Karen :: Handcrafted Greeting Cards
And see the CSS here: http://www.kardsbykaren.us/kknav.css

How do I make my submenu appear when I click on a link?

I am trying to make my submenu reappear once you click on the catalogue link, how do I do this?
This is the new uploaded website:
http://www.darbymanufacturing.com/test_website2/index.html
CSS:
Here is my nav code:
ul#nav {
margin:0 auto;/*---centers nav----*/
padding:5px 0 0 0;
font-size:12px;
width:960px;
#nav li {
list-style-type:none;
display:inline;/**-----this makes menu and submenu horizontal-------**/
#nav li a {
float:left;
display:block;
padding: 3px 10px;
background:none;/**--if i want to add an image code is url then select imgage-----**/
margin:0 5px 0 0;
text-align:center;
text-decoration:none;
text-transform:uppercase;
color:#fff;
font-weight:bold;
}/**--links for all list items--**/
#nav li a:hover {
color:#9BCDFF;
}/**----hover color for all links----**/
#nav ul {
clear:both;
display:none;/*----makes submenu disappear----*/
#nav li.active-page a {
color:#666;
Is this written properly? Do I need to add anything for other browsers?

Look at SuperFish Nav-Bar Style:
http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
Also see "Persistent Page Indicator on Site Wide Menus"
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Persistent page indicator

Similar Messages

Maybe you are looking for