Attractive,colorful Dropdown list box in Html,Css

To change the background color of drop-down menu box i.e Select tag  in html

Are you bored to default drop-down box in html,Lets make it colorful using CSS.

      Lets see a sample program to create a colorful drop-down box.

                        

  Html:

 <select name="state" id="state" >
            <option value="">Select state....!</option>
            <option value="">Option 1</option>
            <option value="">Option 2</option>
            <option value="">Option 3</option>
            <option value="">Pradeesh</option>
         
            </select>

  CSS :

       select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 14px arial,sans-serif;
  background-color:#5e8ce9;
       }
select:hover {
  background-color:#8db3ff;
  color: black;
}
select option:nth-child(odd) {
            color:black;
            background:#5e8ce9;
        }
 select option:nth-child(even) {
            color:black;
            background:#5e8ce9;
        }

  Ex:2  Background color of each item in select tag can be changed, in the below code the "odd" items & "even " items in the list are differentiated.

 <style>

select {
  width: 158px;
  height: 24px;
  color: #fff;
  font: 15px Timesnewroman;
  background-color:#53868B;
}
select option:nth-child(odd) {
            color:black;
            background:#9BCD9B;
        }
 select option:nth-child(even) {
            color:black;
            background:#66CDAA;
        }
</style>


Read more about simple drop down box & their attributes in w3schools .

Drop-Down Navigation menu bar in Html/Css code

Attractive drop down navigation menu for websites.Drop down menu tutorial.
Navigation bar helps the visitor to navigate the web site.It also help in search engine optimization.

HTML:

<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
       <li><a href="#">Item Two</a><ul>
<li><a href="#">1 Under Item two </a></li>
<li><a href="#">2 Under Item two</a></li>
<li><a href="#">3 Under Item two</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>

CSS:

#navbar {

margin: 0;

padding: 0;

height: 1em; }

#navbar li {

list-style: none;

float: left; }

#navbar li a {

display: block;

padding: 3px 8px;

background-color: #5e8ce9;

color: #fff;

text-decoration: none; }

#navbar li ul {

display: none; 

width: 10em; /* Width to help Opera out */

background-color: #69f;}

#navbar li:hover ul {

display: block;

position: absolute;

margin: 0;

padding: 0; }

#navbar li:hover li {

float: none; }

#navbar li:hover li a {

background-color: #69f;

border-bottom: 1px solid #fff;

color: #000; }

#navbar li li a:hover {

background-color: #8db3ff; }

More animated flash navigation menu bars.
_______________________________________________________________________________

PopUp window in javascript to get input from user

Program to open a popup window when a site(web page) loads.This Popup used to get Input from user i.e A popup window with drop-down box,text box.

Here is a javascript code to open and close a popUp on button click.Can be used along with JSP & PHP programs

JavaScript to Open & Close Popup window:

<script type="text/javascript">
$(function(){
    $('#popuplink').click(function(){
               
        $('#popup').show("slow");
   
    });
   
     $('#popupclose').click(function(){
     
        $('#popup').hide("slow");
   
    });
});
</script>

The below html code hold things to be shown in the Popup window.It is in hidden div, it will be displayed  & hidden on button click

HTML:

<div id="popup">
<div id="contentarea">
<form method="post" action="home.jsp">
Choose Your City:<select id="popuptext" name="city">
<option id="popuptext" value="">select ....!</option>
<option id="popuptext" value="">Pradeesh</option>
<option id="popuptext" value="">Chennai</option>
<option id="popuptext" value="">Delhi</option>
<option id="popuptext" value="">Mumbai</option>
<option id="popuptext" value="">Techie</option>
</select>
 <input id="popupclose" type="submit" value="submit" />  
</form>
</div>    
</div>

css styling Element to make effective effect

CSS:

#popup
{
    display:none;
    position: fixed;
    width:250px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-left:-155px;
    margin-top:-110px;
    border:5px solid red;
    background-color:#DEDFDE;
    padding:30px;
    z-index:102;
    font-family:Verdana;
    font-size:10pt;
    border-radius:10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    font-weight:bold;
}
#contentarea
{
    height:auto;
    width:250px;
    margin:60px auto;
}
#popupclose
{
    margin:30px 0 0 80px;
    width:70px;
   
}

Engineering college Fees Details

chennai fees structure of Engineering college

Councelling seat  per year 

        Tution fees       -     60,000  to 80,000

        Other fees         -    10,000   to 30,000

        Bus fees            -    17,000  to  25,000 (Bus  may be even worse than MTC bus)

        Hostel fees        -     

Management seat  per year

        Tution fees        -    70,000  to 100000

        Other fees         -    10,000   to 30,000

        Bus fees            -    17,000  to  25,000

        Hostel fees        -

        

        Excluding Donation  

Related Post:

        How to select an Engineering college
        Top 20 Engineering College
        Cut-Off Marks & College

__________________________________________________________________