Click here to Skip to main content
15,936,122 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

How to apply the CSS Class for Individual Dynamic menu item in ASP.net Menu control. below i am giving the control look like as:

<asp:Menu ID="cssTasksReports" runat="server" Orientation="Vertical" StaticDisplayLevels="1" >
<staticmenuitemstyle itemspacing="2" backcolor="#EAF4FF">
ForeColor="#006699" Width="200" />
<statichoverstyle>
<staticselectedstyle>
<items>

Here links will come from database



in the above code

<items> will come from the database here my doubt is how to apply css to these items these are webpages.

css will contain like: this is for menu items that are in
    so instead of
      in need to create <asp:menu>

      #panel {

      width:200px;

      list-style:none;
      padding-top:10px;
      display:inline-block;
      }

      #panel li {
      border-radius:3px 3px 3px 3px;
      margin-top:5px;
      width:100px;
      background: #9999CC;
      background: background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
      border-left:1px solid red; border-top:1px solid red; border-right:1px solid red; border-bottom:1px solid red;
      }

      #panel li.animation {
      -webkit-transition: all 0.5s ease-in-out;
      -webkit-transform:translateX(0px);
      }

      #panel li.animation:hover {
      -webkit-transform:translateX(25px);
      }

      #panel li a {
      color:Green;
      display:block;
      padding:10px;
      }

      #panel li a:hover {
      color:#00c6ff;
      }

      </style>

      Please let me know as soon as possible.

      Thanks in Advance.
      Regards,
      Raghu.
    Posted

    1 solution

    Ok,
    First of all create a class in the css file, let's call it .myMenu, then set the CssClass attribute of the asp:Menu to myMenu.
    CSS
    .myMenu
    {
    color:#006699;
    width:200px
    }

    <asp:Menu ID="cssTasksReports" runat="server" Orientation="Vertical" StaticDisplayLevels="1" CssClass="myMenu" />

    Now add your item styles to the CSS
    CSS
    .myMenu LI
    {
    border-radius:3px 3px 3px 3px; 
    margin-top:5px;
    width:100px;
    background: #9999CC;
    background: background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    border-left:1px solid red; border-top:1px solid red; border-right:1px solid red; border-bottom:1px solid red;
    }
    etc...

    After your page has loaded press F12 to open the developer's toolbar and you can see how the menu control is rendered in HTML and how the CSS is being applied to the elements.
     
    Share this answer
     

    This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



    CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900