locked
Menu Hover using JavaScript and CSS? RRS feed

  • Question

  • User-2122896793 posted

    Hi people,

    I know how to use Asp.net Menu Control, both horizontally and vertically. But I need to know how to do it with basic html.  What I have is a vertical menu but I have a problem hiding the submenu. The submenu should show only when someone hover over it and is hidden again when not hover over. Its not a sliding menu, just a basic menu and relative submenu.

    The following link is a vertical menu example of what I am trying to accomplish: http://www.wpftutorial.net/Home.html  

    Is it possible to accomplish this example using Framework 2.0? Also, the submenu's transparancy background is so cool. Please show me how that is possible. Yes, I know that wpf is only available from framework 3.0 and/or 3.5 but is the menu example made from VS 2008? The View Source shows it as a basic ul and li tags. I would love to see the javascripts function behind it.

    Anyway, I need working code using JavaScripts and CSS please. Please don't drop a link and expect me to get it as I am new at this. I've seen a few links but am not successful implementing such code.

    I have a menu and submenu inside a div which is inside a td which is inside a tr tag.  How do I implement JavaScripts and possibly CSS in the following codes? This code is basically the same as the example from the link.

    <tr style="font-family: Times New Roman; text-decoration: underline">
                    <td style="width: 10px; height: 670px">
                    </td>
                    <td style="width: 10px; height: 670px; background-color: #000000">
                    </td>
                    <td id="LeftMenu" colspan="2" style="vertical-align: top; color: #ffffff; height: 670px;
                        background-color: #000000; text-align: left">
                        <div style="vertical-align: top; width: 151px">
                            <ul id="Menu1">
                                <li><a href="Home.aspx"><span style="color: #ffffff">Home</span></a><span style="color: #0000ff">
                                </span></li>
                                <li><span style="color: #ffffff">Getting started</span><span
                                    style="color: #0000ff"> </span>
                                    <ul>
                                        <li><span style="color: #ffffff">Introduction
                                            to WPF</span><span style="color: #0000ff"></span></li>
                                        <li><span style="color: #ffffff">Development
                                            Tools</span><span style="color: #0000ff"></span></li>
                                        <li><span style="color: #ffffff">Books</span><span style="color: #0000ff">
                                        </span></li>
                                        <li><span style="color: #ffffff">Create a simple WPF application</span><span
                                            style="color: #0000ff"></span></li>
                                        <li><span style="color: #ffffff">Learn
                                            WPF in two Weeks</span><span style="color: #0000ff"></span></li>
                                    </ul>
                                </li>
                                <li><a href="HTMLPage1.htm"><span style="color: #ffffff">Fundamentals</span></a><span
                                    style="color: #0000ff"> </span>
                                    <ul>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">What's new in XAML in .NET
                                            4.0</span></a><span style="color: #0000ff"> </span></li>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">XAML</span></a><span style="color: #0000ff">
                                        </span></li>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">Dependency Properties</span></a><span
                                            style="color: #0000ff"> </span></li>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">Routed Events</span></a><span
                                            style="color: #0000ff"> </span></li>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">Logical- and Visual Tree</span></a><span
                                            style="color: #0000ff"> </span></li>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">WPF Troubleshooting</span></a><span
                                            style="color: #0000ff"> </span></li>
                                    </ul>
                                </li>
                                <li><a href="HTMLPage1.htm"><span style="color: #ffffff">User Experience</span></a><span
                                    style="color: #0000ff"> </span>
                                    <ul>
                                        <li><a href="HTMLPage1.htm"><span style="color: #ffffff">UX Design Process</span></a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="HTMLPage1.htm"><span style="color: #ffffff">Architecture</span></a><span
                                    style="font-size: 9pt; font-family: Tahoma"> </span>
                                    <ul>
                                        <li><a href="HTMLPage1.htm">Introduction to the MVVM pattern</a> </li>
                                        <li><a href="HTMLPage1.htm">WPF Reference Architecture</a> </li>
                                    </ul>
                                </li>
                                <li><a href="HTMLPage1.htm">Custom Controls</a>
                                    <ul>
                                        <li><a href="HTMLPage1.htm">UserControls vs. CustomControls</a> </li>
                                        <li><a href="HTMLPage1.htm">How to Create a Custom Control</a> </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </td>


     

    Thursday, December 10, 2009 8:47 PM

Answers

All replies