Hi

I'm having a problem creating a css based rollover menu.  I have a graphic containing 3 states ('Unselected', 'Hover' and 'Selected')

I need the vertical position of the images to change for each of the 3 states.

The 'Unselected' and 'Hover' states work, however I need to change the li id to display the 'Selected' part of image.

Any help with this would be appreciated

CODE

<ul id="nav">

<li id="page1"><a href="Default.aspx"></a></li>

<li id="page2"><a href="Hips.asp"></a></li>

<li id="page3"><a href="Form.aspx"></a></li>

</ul>

CSS

<style type="text/css">

#nav a {display:block; height:40px;}

#page2{ background:url(i/menu-2.gif) no-repeat 0 0; width:100px;}

#page1:hover, #page2:hover, #page3:hover{ background-position:0 -40px;}

#page1-selected #page2-selected, #page3-selected{ background-position:0 -80px; }

</style>

Hi Kagool,

This site contains hundreds of examples of CSS Menus http://www.cssplay.co.uk/menus/.  I am sure you can find what you are looking for there.

Hope this Helps,

Scott 

#page1-selected #page2-selected, #page3-selected{ background-position:0 -80px; }

/* change it as below */
#page1:selected #page2:selected, #page3:selected{ background-position:0 -80px; }

Thanks. 

Thanks for the link Scott.  I'm sure it will come in handy.  I never explained myself fully before.  I'm using master and content pages and the code for the navigation is contained in the master page.  It's not really the menu I'm having problem with but more how to change the id of the currently selected li item so that the right style is applied.

Thanks also for your advice Hoque, however your solution does not work

Well, what you basically need to do, is call some javascript that will make the li elements id change. I am going to assume that you want it to change on a click, and that it wont cause a postback (if it's going to cause a postback, you can do it all on the server in your code-behind).

eg:

<li id="item1" onclick="if(this.id.indexOf('selected') == -1){this.id+='-selected'}">Item</li>

Simply put, if it is not already selected, this will add "-selected" to the li elements id. I'm sure you probably have other requirements as well, but I won't go ahead and guess and write code if you don't need it!

 Although this will work... I would strongly suggest using a class instead of mucking about with an elements id. If you don't know about classes, find a quick tutorial on CSS and do it from start to finish. It will be invaluable. They will have one at www.w3schools.com for sure, which is a brilliant reference site for CSS, XHTML, Javascript and the DOM in general.

Thanks for the pointers bubblesnout.  I took your advice about adding a class instead of changing the li's id

The code below is a sample of the navigation from the master page.  Clicking on a link redirects the user to the associated page

 I'm still having problems adding class="page_selected" to the li tag of the current selected page.

Any ideas as to how I could add some code to the master.vb file to add this code automtically

CSS

<style type="text/css">
        #nav li{float:left; display:inline;}
        #nav a{display:block; height:40px;}
        #page1{background:url(i/menu-1.gif); width:100px;}
        #page2{background:url(i/menu-2.gif); width:100px;}
        #page3{background:url(i/menu-3.gif); width:100px;}        
        #page1:hover,#page2:hover,#page3:hover{background-position:0 -40px;}
        #page1.page_selected,#page1.page_selected:hover,#page2.page_selected,#page2.page_selected:hover,#page3.page_selected,#page3.page_selected:hover{background-position:0 -80px;}
</style>

CODE

<div id="nav">
  <ul>
    <li id="page1" runat="server"><a href="page1.aspx" mce_href="page1.aspx">Page 1</a></li>
    <li id="page2" runat="server"><a href="page2.aspx" mce_href="page2.aspx">Page 2</a></li>
    <li id="page3" runat="server"><a href="page3.aspx" mce_href="page3.aspx">Page 3</a></li>
  </ul>
</div>

Use something like the following in your Page_Load (in your Masterpage, or wherever you can check)

If HttpContext.Current.Request.Url.AbsolutePath.Contains("Page1.aspx") Then
    page1.Attributes("class") = "page_selected"
ElseIf HttpContext.Current.Request.Url.AbsolutePath.Contains("Page2.aspx") Then
    page2.Attributes("class") = "page_selected"
ElseIf HttpContext.Current.Request.Url.AbsolutePath.Contains("Page3.aspx") Then
    page3.Attributes("class") = "page_selected"
End If

Theres probably a better way than using a big If statement, but that should give you the idea

Thanks again bubblesnout

Your solution almost solved my problem however with runat="server" on the li tags,  the id's get prefixed with ct100_, ct100_ct100_ etc

Hence the correct styles are not applied

If you were using CSS classes, you wouldn't have that problem

Rather than having your CSS set as such:
#ElementID

Use this syntax:
.ClassName

And then in your elements tag, use the 'class' attribute. ie:
<li runat="server" id="page1" class="page1">

That way it will use the CSS rule for ".page1", and when you change it in your code-behind, as I gave you an example of in my previous post, it will use the CSS rule for ".page1_selected"

Catch my drift?

Woohooooo.  By moving the styles from the id to a class it now works

Thanks for your help bubblesnout.  I'm new to .NET and your advice solved my problem.

The code below can be modified to provide a menu which uses images that contain the 3 states

CSS

<style type="text/css">
        #nav li{float:left; display:inline;}
        #nav a{display:block; height:40px;}
        .page1{background:url(i/menu-1.gif); width:100px;}
        .page2{background:url(i/menu-2.gif); width:100px;}
        .page3{background:url(i/menu-3.gif); width:100px;}         
        #nav a:hover{background-position:0 -40px;}
        .page_selected,.page_selected:hover{background-position:0 -80px;}
</style>

CODE

<div id="nav">
  <ul>
    <li id="page1" class="page1" runat="server"><a href="page1.aspx"></a></li>
    <li id="page2" class="page2" runat="server"><a href="page2.aspx"></a></li>
    <li id="page3" class="page3" runat="server"><a href="page3.aspx"></a></li>
  </ul>
</div>

CODE BEHIND

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If HttpContext.Current.Request.Url.AbsolutePath.Contains("Page2.aspx") Then
            page2.Attributes("class") = "page2 page_selected"
        ElseIf HttpContext.Current.Request.Url.AbsolutePath.Contains("Page3.aspx") Then
            page3.Attributes("class") = "page3 page_selected"
        Else
            page1.Attributes("class") = "page1 page_selected"
        End If
    End Sub