How to apply class conditionally using ng-class in AngularJs

The ngClass directive gives you the ability to conditionally change CSS classes via an expression in the html.

Example
Example that demonstrates dynamically set CSS classes on an DIV HTML element. Continue reading “How to apply class conditionally using ng-class in AngularJs”

Create your own custom cursor (mouse pointer) for your web page.

You can change the mouse pointer for the your web page or a specific html element.

Generally we use the cursor property in css that specifies the type of cursor to be displayed when pointing on an element. Such as: Continue reading “Create your own custom cursor (mouse pointer) for your web page.”

Arrow slide show – JavaScript and CSS

You can download complete code for slide show that is very simple to use in your website or webpage. It is easy to use.
Its totally customize arrow slide show. we can change number of image display at a time time interval between two images.
Continue reading “Arrow slide show – JavaScript and CSS”

Dropdown menu in html

 
Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download

Drop down menu in html and css
Drop down menu in html and css
DropDown Menu in HTML.zip
2.1 KiB
657 Downloads
Details

You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :

<html>
<head>
    <title>DropDown menu in HTML</title>
    <link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
        <ul>
	<li><a href=''>About Us</a></li> 
	<li><a href=''>Contact Us</a></li> 
	<li><a href=''>Authors</a></li> 
	<li><a href=''>EmailUs</a></li>
        </ul>
     </li>
 
     <li> 
     <a href=''>DEVELOPMENTt</a>  
        <ul>
	<li><a href=''>CSharp language</a></li>
 	<li> <a href=''>Visual Basic .Net </a> </li> 
	<li><a href=''>Visual Basic 6.0</a></li> 
	<li><a href=''>Visual C++</a></li>
	</ul>
     </li>
 
     <li> 
     <a href=''>WEB DEVEL</a> 
        <ul>
	<li><a href=''>ASP.Net</a></li>
 	<li><a href=''>JavaScrip</a></li>
        </ul>
     </li>
 
     </ul>
</div>
</body>
</html>

CSS :

#menus
{
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:30px;
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
	width:150px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:30px;
	 text-decoration:none;
	 font-size:12px;
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:30px;
	display:block;
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:30px;
	 overflow:hidden;
	 background:url(images/navbg7.gif) repeat-x left top;
}