Home/ Questions/Q 8809907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T02:59:33+00:00

I have an ASP.Net with C# application.I want to have a menu and when

  • 0

I have an ASP.Net with C# application.I want to have a menu and when i am with the mouse on a menu i want to show a div where i have some informations:a title,and some other options on two columns .
I wrote a Javascript method from where I want to make visible the corresponding div ,but it doesn’t find my div section (it’s always null) .

Can somebody tell me what’s the problem ?
Below is the code.
I am begginer in ASP.Net,Javascript.Do you know an other method,better , for doing that ?(with an example please if you have)

My asp.net page :

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Sales_Site.SiteMaster" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
 <link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>


 </head>
 <body>
<form runat="server">
<div class="page">
    <div class="header">
        <div class="menu" >
        <ul id="main-nav">
            <li><a href="Books.aspx" onmouseover="Javascript:Show('Books')">Books</a>
                <div class="main-nav-sectionBooks"  style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Books Categories :
                    <ul><li>Subcateg1</li></ul>
                    <ul><li>Subcateg2</li></ul>
                    <ul><li>Subcateg3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
            </li>
            <li><a href="Music.aspx" onmouseover="Javascript:Show('Music')">Music</a>
                <div class="main-nav-sectionMusic" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Music Categories :
                    <ul><li>Subcateg Music 1</li></ul>
                    <ul><li>Subcateg Music 2</li></ul>
                    <ul><li>Subcateg Music 3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
             </li>
            <li><a href="Clothing.aspx" onmouseover="Javascript:Show('Clothing')">Clothing</a>
             <div class="main-nav-sectionClothing" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
                    <div class="main-nav-section-left" style="float:left;width:200px;height:100px">
                    Clothing Categories :
                    <ul><li>Subcateg Clothing 1</li></ul>
                    <ul><li>Subcateg Clothing 2</li></ul>
                    <ul><li>Subcateg Clothing 3</li></ul>
                </div>
                <div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
                Test 123 
                </div>
                </li>
        </ul>
        </div>


    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
    <div class="footer">

</div>

</div>
    <script type="text/javascript" language="javascript">
        function Show(type) {
            HideControl("main-nav-sectionBooks");
            HideControl("main-nav-sectionMusic");
            HideControl("main-nav-sectionClothing");

            var ControlName = "main-nav-section" + type;
            alert(ControlName);
            var control = document.getElementById(ControlName);

            if (control) {

                control.style.display = 'block';
                control.style.visibility = 'visible';

            }
            else
                alert("null");

        }

        function HideControl(controlName) {
            var control = document.getElementById(controlName);

            if (control) {
                control.style.display = 'none';
                control.style.visibility = 'hidden';
            }
        }

</script>
</form>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would just do this with CSS:

    EXAMPLE
    http://jsbin.com/oreqew/1/edit

    HTML:

    <div class="page">
    <div class="header">
        <div class="menu" >
        <ul id="main-nav">            
          <li>Books
            <div class="main-nav-sectionBooks"  style="width:400px;height:250px;border:1px solid Blue;">
                  SOMETHING
          </li>           
        </ul>
      </div>
  </div>
 </div>

    CSS:

    .main-nav-sectionBooks{
  display:none;
}

#main-nav li:hover div.main-nav-sectionBooks{
  display:block;
}
    • 0