Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS ASP.NET4.0
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 9-Nov-12 0:27am

    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
    0 George Jonsson 215
    1 Kornfeld Eliyahu Peter 169
    2 OriginalGriff 120
    3 PIEBALDconsult 110
    4 Zoltán Zörgő 99
    0 OriginalGriff 6,165
    1 DamithSL 4,658
    2 Maciej Los 4,107
    3 Kornfeld Eliyahu Peter 3,649
    4 Sergey Alexandrovich Kryukov 3,342


    Advertise | Privacy | Mobile
    Web01 | 2.8.141220.1 | Last Updated 9 Nov 2012
    Copyright © CodeProject, 1999-2014
    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