Need some details

Hi,

Once the relevant TAB is on focus, I expect to show the corresponding li items per the given TAB name. Is there one example to this?

Hi,

Are u after Tabs, check the jquery.ui tabs:

http://jqueryui.com/tabs/

if that not fits ur requirement, explain in details.

I already had the TABS like

    <div class="content" id="wrapper" style="" >
        <div class="topnav">
            <ul>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onfocus="" onclick="">test</a></li>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onclick="">test2</a></li>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onclick="">test3</a></li>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onclick="">test4</a></li>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onclick="">test5</a></li>
            </ul>    
        </div>
    </div>

but within each TAB, I also want to show different li list. Any example to this?

Hi,

wmec

but within each TAB, I also want to show different li list. Any example to this?

Its just as simple as Html, check below code:

<div class="content" id="wrapper" style="" >
        <div class="topnav">
            <ul>
                <li><a href="#" style="color:#5234AD; font-size:x-large; font-style:normal; font-weight:bold;" onfocus="" onclick="">test</a>
                    <ul><li>item1</li><li>item2</li><li>item3</li></ul>
                </li>
                
             </ul>    
    </div>
</div>

above code not tested, if that not works let me know.

Hi wmec,

Based on my understanding, it seems that you want to  menu bar  with submenu ,when you  move the given tab,it will show the sub items for the given tab.

I suggest that you can try the code below:

html>
<head>
    <title>Example of HTML Menu</title>
    <style type="text/css" media="screen">
        #horizontalmenu ul {
            padding: 1;
            margin: 1;
            list-style: none;
        }

        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }
    </style>
</head>
<body>
    <div id="horizontalmenu">
        <ul>
            <li>
                <a href="#">News</a>
                <ul>
                    <li><a href="#">National</a></li>
                    <li><a href="#">International</a></li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Hollybood</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Technology</a>
                <ul>
                    <li><a href="#">IT/Software</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Sports</a>
                <ul>
                    <li><a href="#">Cricket</a></li>
                    <li><a href="#">Tenis</a></li>
                    <li><a href="#">Badminton</a></li>
                    <li><a href="#">Hockey</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Country</a>
                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li>
                        <a href="#">Pakistaan</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

You can also refer to the link for diverse navigation bar:

http://mrbool.com/how-to-create-menu-with-submenu-using-css-html/26146

Best Regards,

Kevin Shen.

Many thanks

Hi wmec,

Have you solved your issue,if does,please mark the reply who helps you.

Best Regards,
Kevin Shen.

Sorry, I get this error

Server Error in '/App3' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace: 


[NullReferenceException: Object reference not set to an instance of an object.]
   App3._Default.Page_Load(Object sender, EventArgs e) +108
   System.Web.UI.Control.LoadRecursive() +70
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3177

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34237

when running the deployed project having this page inside

<%@ Page Title="??????/????" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="App3._Default" ValidateRequest="false" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 runat="server">
    <meta http-equiv="Refresh" content="120" />
	<title>??/??</title>
    <style type="text/css">
        #horizontalmenu ul {
            padding: 1;
            margin: 1;
            list-style: none;
        }

        #horizontalmenu li {
            float: left;
            position: relative;
            padding-right: 100;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

            #horizontalmenu li ul {
                display: none;
                position: absolute;
            }

            #horizontalmenu li:hover ul {
                display: block;
                background: red;
                height: auto;
                width: 8em;
            }

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
            }
            ...
    </style> 
</head>
<body>
    <form id="form1" runat="server">
    <div id="horizontalmenu">
        <ul>
            <li>
                <a href="#">News</a>
                <ul>
                    <li><a href="#">National</a></li>
                    <li><a href="#">International</a></li>
                    <li><a href="#">Sport</a></li>
                    <li><a href="#">Hollybood</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Technology</a>
                <ul>
                    <li><a href="#">IT/Software</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Sports</a>
                <ul>
                    <li><a href="#">Cricket</a></li>
                    <li><a href="#">Tenis</a></li>
                    <li><a href="#">Badminton</a></li>
                    <li><a href="#">Hockey</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Country</a>
                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li>
                        <a href="#">Pakistaan</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <br />
    <asp:Label ID="lb_ite21"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite22"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite23"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite24"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite25"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite26"
        CssClass="dia"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_var1"
        Visible="false"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    <asp:Label ID="lb_ite_id"
        width="165px"
        Visible="false"
        Font-Names="Times New Roman" 
        Font-Size="11pt" 
        Font-Bold="true"
        ForeColor="DarkBlue"
        runat="server" />
    </form>
</body>
</html>

Hi wmec,

Based on the error you post,it seems that you  have not
set  an instance of an object to your Object reference.
It is not related with the html,css style.

I suggest that you can set a breakpoint on code in your server side, find which the object has not been set to an instance.

Best Regards,

Kevin Shen.

OK.

Very sorry Kevin.

for instance, i expect to show each li item like the 1st two li items below

    <style type="text/css">
        #horizontalmenu {
          text-align: center;
        }
        #horizontalmenu ul {
          padding: 1;
          margin: 1;
          list-style: none outside none;
          display: inline-block;
        }
...

                <ul>
                    <li><a href="#">India</a></li>
                    <li><a href="#">America</a></li>
                    <li><a href="#">France</a></li>
                    <li>
                        <a href="#">Pakistaan</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

to all the sub-menu items. How to adjust the css file?

Hi wmec,

You don’t need to change css style,just change the contents in other li items like your 1st .

Best Regards,

Kevin Shen.

Now there is no enough space to show the relevant picture file to each sub menu item. How to enlarge the area of each sub menu item?

Hi wemc,

You can set the width for your sub menu item  like below:

            #horizontalmenu li ul li {
                clear: both;
                border-style: none;
                width:300px;
            }

Best Regards,

Kevin Shen.

Many thanks Kevin.

Hi wmec,

According to your post ,it seems that you want a vertical menu, I suggest that you can try the link which provide a demo for you:

http://cssmenumaker.com/menu/opera-flyout-menu

Best Regards,

Kevin Shen.

Ok, on my current screenshot, there’re TABs on the left of the screen. But each TAB is having a list while each item of the list is having picture file to that. Any similar example to this?

Hi wmec,

You can add image  as content in the  li of  your main ul .

Best Regards,

Kevin Shen.

Hi Kevin,
How to adjust the css part below

    <style type="text/css">
        * {
          padding: 0;
          margin: 0;
        }
        ul {
          list-style: none;
        }
        ul.main {
          width: 200px;
        }
        ul.main > li {
          line-height: 20px;
          background: red;
          color: white;
          box-sizing: border-box;
          padding: 10px;
          position: relative;
        }
        a {
          color: white;
        }
...

                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label18" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">
                        <div class="imagesList-item-frame shadow">
                            <img src=<%=lb_pict2.Text %> />
                            <div class="legend">
                                <div style="height:18px; width:92px; font-size:small; border:none; background-color:#1BA8E0">
                                    <label id="Label19" runat="server"><b>????</b></label>
                                <div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

to ensure that the TABs with sub-items do appear like the current screenshots shown above?

Leave a Reply