Great Examples Of Menu Designs

MenuMatic Vertical Example

Example

Click to DEMO

 

MenuMatic Horizontal Example

Example

Click to DEMO

 

Suckerfish Dropdown

Example

Click to DEMO

 

Kwicks for jQuery horizontal animated menu

Example

Click to DEMO

 

Dropline with current selection

Example

Click to DEMO

 

Prototype type Vertical Menu

Example

Click to DEMO

 

Digg like Navigation Bar using CSS

Example

Click to DEMO

 

Flickr Menu

Example

Click to DEMO

 

Simple CSS vertical menu Digg-like

Example

Click to DEMO

 

GettyImages like search options menu with Scriptaculous

Example

Click to DEMO

 

Fancy Sliding Tab Menu

Example

Click to DEMO

 

Urban Gray Accordion Menu

Example

Click to DEMO

 

Glossy Accordion Menu

Example

Click to DEMO

 

Bullet List Accordion Menu

Example

Click to DEMO

 

Create a Slick Tabbed Content Area using CSS & jQuery

Example

Click to DEMO

 

Slate CSS Menu

Example

Click to DEMO

 

Vert-one CSS Menu

Example

Click to DEMO

 

Classics CSS Menu

Example

Click to DEMO

 

Rounded CSS Menu

Example

Click to DEMO

 

Matte CSS Menu

Example

Click to DEMO

 

Dolphin CSS Menu

Example

Click to DEMO

 

Jungle CSS Menu

Example

Click to DEMO

 

Fisheye JavaScript Menu

Example

Click to DEMO

 

Lava Lamp Menu Examples

Example

Click to DEMO

 

SuckerFish Style using jQuery

Example

Click to DEMO

 

Create Vimeo-like top navigation

Example

Click to DEMO

Stylesheet switcher using jQuery

This is a simple example of stylesheet switcher

HTML

  <h1>Stylesheet switcher using jQuery</h1>
   <h3>Currently active stylesheet: Green</h3>
  <p><strong>Choose a different stylesheet:</strong></p>

  <ul>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=green" rel="green" class="styleswitch">Green</a></li>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=yellow" rel="yellow" class="styleswitch">Yellow</a></li>
  <li style="font-size:16px; font-weight:bold;"><a href="serversideSwitch.html?style=olive" rel="olive" class="styleswitch">Olive</a></li> 
  </ul>

Green.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(green.png) repeat #607459;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #607459; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Yellow.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(yellow.png) repeat #D0A728;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #D0A728; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Olive.css

body, html {

    height: 100%;

    margin: 0;

    font-family : Arial, Helvetica, sans-serif;

    background:url(olive.png) repeat #A7AB76;

    color: #333; font-size: 76%; padding: 20px; }
  a { color: #A7AB76; outline: none !important; text-decoration:underline; }

    a:hover { color: #333; text-decoration: none; text-decoration:none; }
 

Javascript

(function($)

    {

    $(document).ready(function() {

    $('.styleswitch').click(function()

    {

    switchStylestyle(this.getAttribute("rel"));

    return false;

    });

    var c = readCookie('style');

    if (c) switchStylestyle(c);

    });
   function switchStylestyle(styleName)

    {

    $('link[rel*=style][title]').each(function(i) 

    {

    this.disabled = true;

    if (this.getAttribute('title') == styleName) this.disabled = false;

    });

    createCookie('style', styleName, 365);

    }

    })(jQuery);

    // cookie functions http://www.quirksmode.org/js/cookies.html

    function createCookie(name,value,days)

    {

    if (days)

    {

    var date = new Date();

    date.setTime(date.getTime()+(days*24*60*60*1000));

    var expires = "; expires="+date.toGMTString();

    }

    else var expires = "";

    document.cookie = name+"="+value+expires+"; path=/";

    }

    function readCookie(name)

    {

    var nameEQ = name + "=";

    var ca = document.cookie.split(';');

    for(var i=0;i < ca.length;i++)

    {

    var c = ca[i];

    while (c.charAt(0)==' ') c = c.substring(1,c.length);

    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

    }

    return null;

    }

    function eraseCookie(name)

    {

    createCookie(name,"",-1);

    }
  

View Example

Source: kelvinluck.com

Fisheye JavaScript Menu Example

Fisheye Menu is an expanding menu based on the MacOSX

• Image swaps between small/large image to avoid the browser just squishing a big image.
• Image type and size is customizable on the top of the .js file.
• Object oriented Javascript.

Example

Simple CSS Vertical Menu Digg like Example

Flickr Type Menu Example

Kwicks for jQuery Horizontal Animated Menu

Suckerfish Dropdown Menu Example

MenuMatic Horizontal Menu Example

MenuMatic Vertical Menu

Tabbed search bar using CSS and Javascript

css

#search-bar{padding:10px; background:#90b557; clear:both;}
#search-bar .search-style{ color:#999999; border:solid 1px #CCCCCC; padding:4px;}
ul.search-options, ul.search-options li{ padding:0; border:0; margin:0; list-style:none;}
ul.search-options{clear:both;}
ul.search-options li a{float:left; margin-right:1px; width:auto; background:#b2d281; padding:8px; color:#3b5d14; text-decoration:none; }
.selected a{background:#90b557; color:#FFFFFF;}
ul.search-options li.selected a{background:#90b557; color:#FFFFFF;}

div#sBar { list-style-type: none; text-align: center; margin: 0px; padding: 0px; height: 29px; margin-bottom: 10px; width: 728px; background-color: #fff; border: 1px solid #dfdfdf; position: static; left : 0; }

div#sBar li { list-style-type: none; margin: 0px; padding: 0; float: left; width: auto; background: none; }

#sBar div.sBarInside { list-style-type: none; margin: 0px; padding: 0; float: left; }

#sBar div.sBarInside img { float: left; border: 0px;}

#sBar div.sBarInside strong span.checkItOut { color:#0000ff; font-size: 15px; font-family: arial, helvetica; text-decoration: underline; font-weight: bold; }

#sBar div.sBarInside strong { float: left; margin: 6px 0px 0px 5px; font-size: 15px; font-family: arial, helvetica; cursor: hand; }

#sBar div.trial { padding: 0px; margin: 0px; float: none;}

#sBar div.trial img { float: right;}

HTML

<ul class="search-options">
<li class="selected" id="tab1"><a onclick="javascript:setSearchOptions(1);" href="#">Web</a></li>
<li id="tab2"><a onclick="javascript:setSearchOptions(2);" href="#">Images</a></li>
<li id="tab3" class=""><a onclick="javascript:setSearchOptions(3);" href="#">Videos</a></li>
</ul>

<div id="search-bar">
<form action="" method="post" name="form1" id="form1">
<input type="text" size="40" id="searchq" class="search-style" name="">
<input type="hidden" id="searchopt" name="searchopt" value="2">
</form>
</div>

JavaScript

function setSearchOptions(idElement){
 /* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */
 tot_tab = 3;
 tab  = document.getElementById('tab'+idElement);
 search_option = document.getElementById('searchopt');
 for(i=1; i<=3; i++){
  if(i==idElement){
   tab.setAttribute("class","selected");
   search_option.value=idElement;
  } else {
   document.getElementById('tab'+i).setAttribute("class","");
  }
 }
}

Example

Click to DEMO

Password Field Type Casting

HTML

<input type="password" id="pass"/>
<input type="button" value="Show Password" onClick="showpassword();"/>

JavaScript

function showpassword(){
        document.getElementById("pass").type = "text";
    }

Example

Click Here to DEMO

Get Random Numbers

HTML

<input type="button" value="Get Random Value" onClick="getranvalue()"/>

JavaScript

function getranvalue(){
            var randomnumber = Math.floor(Math.random()*4999)
            var keyid = parseInt(randomnumber);            
            if(keyid == 0){
                keyid = 1;
            }
            alert(keyid);
        }

Example

Click Here to DEMO

Get Milliseconds using JavaScript

HTML

<input type="button" value="Get Value" onClick="getsecvalue()"/>

JavaScript

function getsecvalue(){
            var date = new Date();
            var millisec = (date.getMilliseconds());
            alert(millisec);
        }

Example

Click Here to DEMO

Enable And Disable Button using Javascript

HTML

<input type="button" value="Disable" onClick="disable()" id="disable">
<input type="button" value="Enable" onClick="enable()" id="enable" disabled="true">

JavaScript

function disable(){
            document.getElementById("disable").disabled = true;
            document.getElementById("enable").disabled = false;
        }
        function enable(){
            document.getElementById("disable").disabled = false;
            document.getElementById("enable").disabled = true;
        }

Example

Click Here to DEMO

Display Div While Loading

HTML

<div id="showalertdiv" style="color:green;display:none;height:50%">
<h3>Please do you progress message here...</h3><br>
<input type="button" value="Close Div" onClick="closealertdiv()" style="margin-left:40%;margin-top:2%"/>
</div>

<div id="showcontentdiv">
<b>Display Full Screen Div</b><br><br>
<input type="button" value="Display Div" onClick="displaydiv()"/>
</div>

JavaScript

function displaydiv(){
            //alert("Test");
            document.getElementById("showalertdiv").style.display = "";
            document.getElementById("showcontentdiv").style.display = "none";
        }
        function closealertdiv(){
            //alert("Close Test");
            document.getElementById("showalertdiv").style.display = "none";
            document.getElementById("showcontentdiv").style.display = "";
        }

Example

Click Here to DEMO

Confirm Window Close

HTML

Confirm Window Close....

JS

function preventClose() {
        return "Ok will lead to loss of unsaved Datas.";
    }
    window.onbeforeunload = preventClose;

Example

Click Here to download and view Confirm Window Close example
Note: Download confirm-window-close.html on your PC. after you can view sample

Allow Only Letters In Text Box

HTML

<input type="text" id="field"> <input type="button" value="Validate" onClick="textfield()">

JS

function textfield(){
            var firstname = /^[a-zA-Z]*$/;
            var fvalue = document.getElementById("field").value;
            alert(fvalue);
            if(!firstname.test(fvalue)){
                alert("Invalid");
            }
        }

Example

File Attachment Filter In JavaScript

HTML

<form action="" method="post" enctype="multipart/form-data">
   <input type="file" id="filelocation" name="fileField" onChange="return validateFileExtension(this)">
   <input type="reset">
   <input type="submit" value="Upload"/>
</form>

JS

function validateFileExtension(fld){
   if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)){
      alert("Invalid image file type.");
      fld.form.reset();
      fld.focus();
      return false;
      }
      return true;
      }
  
function submitfiles(){
      alert("File location --- " +document.getElementById("filelocation").value);
      alert("File name --- " +document.forms[0].elements[0].value);
      }

Example