Click here to Skip to main content
13,046,281 members (97,554 online)
Rate this:
 
Please Sign up or sign in to vote.
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 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.170713.1 | Last Updated 9 Nov 2012
    Copyright © CodeProject, 1999-2017
    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