google

Newest Post

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Dynamic Menu using HTML and CSS in ASP.Net

| Tuesday, March 25, 2014
Read more »
In this article we will create nested dynamic menus and submenus using CSS and HTML which all browsers support.
  
Let's start by creating a website as:
  1. Start - All Programs - Microsoft Visual Studio
  2. File - New Website - C# - Empty website (to avoid adding a master page)
  3. Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
  4. Then right-click on Solution Explorer - Add New Item - Default.aspx page
Open the source view and use the list tag to create the Menu and Submenu. The source code 
<body> tag should be as in the following:

 <body bgcolor="#c0c0c0">  
   <form id="form2" runat="server">  
   <ulid="Ul1">  // for horizontal Main Menu Tab  
 <li><ahref="#" title ="Homepage" class="selected">About Us</a ></li >  
 <li ><a href ="#" title ="About us">Authors</ a ></li >  //for submenu  
 <li ><a href ="#" title ="Projects">Articles</a >  
 <ul>  
 <li ><a href ="#" title="Older projects">Older Articles</a > //for submenu  
 <ul>  
 <li> <a href ="#" title ="">ASP.Net </ a ></ li >// for Nested subemenu and <a> tag is used to pass URL address  
 <li> <a href ="#" title ="">Silverlight</a ></ li >  
 <li> <a href ="#" title ="">Ajax</a ></ li >  
 </ ul >  
 </ li >  
  <li> <a  href ="#" title ="Active projects">New Articles</a > //for submenu  
 <ul>  
 <li> <a href ="" title ="Excel FIle">File Upload</a ></ li > // for Nested subemenu  
 <li> <a href ="" title ="ConvertNoToString">Convert Number</a ></li >  
 <li> <a href ="" title ="Stored Procedure">Stored Procedure</a ></ li >  
 </ ul >  
 </ li >  
 </ ul >  
 </ li >  
 <li> <a href ="#" title ="Contact">Contact Us</a ></ li >  
 </ul >  
   </form>  
 </body>  

In the above source code the <li> tag is used to create a horizontal Main Menu and the <ul> list tag is used to create the submenu, again under the <ul> used and another <ul> tag to create a nested submenu.
Applying effects to the Menu using CSS
 
To apply the effects to the menu use the following CSS classes:

 #menu, #menu ul  /*for main menu *\  
  {  
 list-style:none;  
 padding:0;  
 margin:0;  
 }  
 /* SHOW SUBMENU 1 */  
 #menu li:hover ul, #menu li.over ul   
 {  
 display:block;  
 }  
 #menu li:hover ul ul, #menu li.over ul ul   
 {  
 display:none;  
 }  
 /* SHOW SUBMENU 2 */  
 #menu ul li:hover ul, #menu ul li.over ul   
 {  
 display:block;  
 }  
 /* for mouse hover */  
 #menu a:hover   
 {  
 background-color:#5798B4;  
 color:#fff;  
 }  

The output in the browser will be:

nestedmenu.jpg


Dynamic Menu using HTML and CSS in ASP.Net

Posted by : Stranger
Date :Tuesday, March 25, 2014
With 0comments

Attaching master page dynamically to a conetnt page

| Tuesday, January 28, 2014
Read more »

As the master page and content page are merged during the initialization stage of page processing, a master page must be assigned before then.
 protected void Page_PreInit(object sender, EventArgs e)  
   {  
     try  
     {  
       if (AdminPages)  
         this.Page.MasterPageFile = "~/Admin.master";  
       else  
         this.Page.MasterPageFile = "~/General.master";  
     }  
     catch (Exception ex)  
     {  
     }  
   }  

The MasterPageFile property can be set only in the PreInit event; attempting to set the MasterPageFile property after the PreInit event will throw an InvalidOperationException exception. If the MasterPageFile property is not valid, an exception of type HttpException is thrown later in the page life cycle, but no exception is thrown when the property is set in the PreInit event.

Attaching master page dynamically to a conetnt page

Posted by : Stranger
Date :Tuesday, January 28, 2014
With 0comments

How to - Populate RadEditor's Apply CSS Class dropdown with custom styles.

|
Read more »
Populate RadEditor's Apply CSS Class dropdown with custom styles.


 <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="400px"  
 Width="100%" >  
 <CssFiles>  
    <telerik:EditorCssFile Value="mystyle.css" />  
 </CssFiles>   
 </telerik:RadEditor>  

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

| Wednesday, February 13, 2013
Read more »

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

Posted by : Stranger
Date :Wednesday, February 13, 2013
With 0comments
Tag : , ,
Prev
▲Top▲