Click here to Skip to main content
12,457,384 members (58,850 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: CSS ASP.NET4
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" >

ForeColor="#006699" Width="200" />




Here links will come from database



in the above code

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 8-Nov-12 23:27pm

    1 solution

    Rate this: bad
     
    good
    Please Sign up or sign in to vote.

    Solution 1

    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.
    .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
    .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.
      Permalink  

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

      Print Answers RSS
    Top Experts
    Last 24hrsThis month


    Advertise | Privacy | Mobile
    Web02 | 2.8.160826.1 | Last Updated 9 Nov 2012
    Copyright © CodeProject, 1999-2016
    All Rights Reserved. Terms of Service
    Layout: fixed | fluid

    CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100