Jafar Khan' Blog: June 2011

Thursday, June 30, 2011

Horizontal List Menu

Horizontal List Menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jafaralikhan.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />

<script type="text/javascript" src="csshorizontalmenu.js">
</script>
</head>

<body>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="http://jafaralikhan">Home</a></li>
<li><a href="http://jafaralikhan.blogspot.com" >Free JS</a></li>
<li><a href="http://jafaralikhan.blogspot.com">JS Tutorials</a></li>
<li><a href="http://jafaralikhan.blogspot.com">References</a>
    <ul>
    <li><a href="http://jafaralikhan.blogspot.com">JS Reference</a></li>
    <li><a href="http://jafaralikhan.blogspot.com">DOM Reference</a></li>
    <li><a href="http://jafaralikhan.blogspot.com">CSS Reference</a></li>
    </ul>
</li>
<li><a href="http://jafaralikhan.blogspot.com">web Tutorials</a></li>
<li><a href="http://jafaralikhan.blogspot.com">Resources</a>
    <ul>
    <li><a href="http://jafaralikhan.blogspot.com">Dynamic HTML</a></li>
    <li><a href="http://jafaralikhan.blogspot.com">Coding Forums</a></li>
    <li><a href="http://jafaralikhan.blogspot.com>CSS Drive</a></li>
    <li><a href="http://jafaralikhan.blogspot.com>CSS Library</a></li>
    <li><a href="http://jafaralikhan.blogspot.com">Image Optimizer</a></li>
    <li><a href="http://jafaralikhan.blogspot.com">Favicon Generator</a></li>
    </ul>
</li>
</ul>

</div>
</body>
</html>
see Demo or download

Monday, June 27, 2011

Vertical and horizontal marquee

Vertical and horizontal marquee

Vertical and horizontal marquee with java script

html Code

<html>
<head>
<style>
#marqueehor
{
   position: absolute;
   bottom:0;
   left:0;
   width: 100%;
   height: 60px;
   border: 1px solid black;
}
#marqueehor div
{
   border: 1px solid red;
   padding: 20px;
   height: 60px;
   position: absolute;
   top: 0;
}
#marqueever
{
   position: absolute;
   left:0;
   top: 0;
   border: 1px solid black;
   width: 100px;
   height: 400px;
}
#marqueever div
{
   border: 1px solid red;
   padding: 20px;
   width: 60px;
   position: absolute;
   left: 0;
}
.wop
{
   padding: 0;
   margin: 0;
}
</style>
</head>
<body style='text-align: center;'>

<div id='marqueehor'>
   <p class='wop'><a href=''>Some text</a></p>
   <p class='wop'><a href=''>More text</a></p>

</div>
<div id='marqueever'>
   <p class='wop'><a href=''>Some text</a></p>
   <p class='wop'><a href=''>More text</a></p>
    <p class='wop'><a href=''>demo</a></p>
</div>
<script type="text/javascript" src="marquee.packed.js" ></script>
<script type="text/javascript">
var horizontal = new marquee("marqueehor").horizontal();
var vertical = new marquee("marqueever").vertical();
</script>
</body>
</html>

see some Demo

Saturday, June 25, 2011

Urban Gray Accordion jQuery Menu and css Menu

Urban Gray Accordion jQuery Menu and css Menu
Urban Gray Accordion Menu is a clean, vertical menu with headers that are activated "mouseover" (200 millisec delay). Each header is hyperlinked itself, feasible since the headers are toggled "mouseover" instead of "onclick". This is an easy to customize, attractive vertical list menu.

Html Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
</script>
<script type="text/javascript">
ddaccordion.init({
    headerclass: "headerbar", //Shared CSS class name of headers group
    contentclass: "submenu", //Shared CSS class name of contents group
    revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
    animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        //do nothing
    }
})

</script>
<style type="text/css">
.urbangreymenu {
    width: 190px; /*width of menu*/
}
.urbangreymenu .headerbar {
    font: bold 13px Verdana;    color: white;
    background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
    margin-bottom: 0; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu .headerbar a {
    text-decoration: none;
    color: white;
    display: block;
}
.urbangreymenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.urbangreymenu ul li {
    padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a {
    font: normal 12px Arial;
    color: black;
    background: #E9E9E9;
    display: block;
    padding: 5px 0;
    line-height: 17px;
    padding-left: 8px; /*link text is indented 8px*/
    text-decoration: none;
}
.urbangreymenu ul li a:visited {
    color: black;
}
.urbangreymenu ul li a:hover { /*hover state CSS*/
    color: white;
    background: black;
}
</style>
<body>
<div class="urbangreymenu">
<h3 class="headerbar"><a href="http:jafaralikhan.blogspot.com">Menu</a></h3>
<ul class="submenu">
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
</ul>
<h3 class="headerbar"><a href="http:jafaralikhan.blogspot.com">Menu</a></h3>
<ul class="submenu">
    <li><a href="http:jafaralikhan.blogspot.com" >Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
    <li><a href="http:jafaralikhan.blogspot.com">Sub Menu</a></li>
</ul>
</div>
</body>
</html>

See Demo

Jquery slider menu

The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.

Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
Your HTML head should look something like this:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>
html code paste between Body Tab

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>

Thats it for the HTML part, now comes the CSS:

.kwicks {  
     list-style: none;  
     position: relative;  
     margin: 0;  
     padding: 0; 
  background-image:url(no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }  
 .kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
 float: left;
 width: 125px;
 height: 40px;
 margin-right: 0px;
 background-image:url(kwicks_sprite.jpg);
 background-repeat:no-repeat;
}
.kwicks a{
 display:block;
 height:40px;
 text-indent:-9999px;
 outline:none;
}

#kwick1 {
 background-position:0px 0px;
}
#kwick2 {
 background-position:-200px 0px;
}
#kwick3 {
 background-position:-400px 0px;
}
#kwick4 { 
 background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover { 
 background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
 background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
 background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
 background-position: -600px bottom; 
}

#kwick1 a{
 background-image:url(end.jpg);
 background-repeat:no-repeat;
 background-position: left 0px;
}

#kwick1 a:hover{
 background-position: left -80px;
}

#kwick4 a{
 background-image:url(end.jpg);
 background-repeat:no-repeat;
 background-position: right -40px;
}
#kwick4 a:hover{
 background-position: right -120px;
}

menu Images

See Demo