HTML Blog: October 2014

Introduction -

In this post you will learn how to build a simple drop down menu (menu with submenu) bu using html & css.

To design any web page navigation menu is important part.If we provide category & sub categories in efficient way so we can create user friendly web pages.To add category & sub categories(menu & submenu), drop down is the best option here.So user can navigate easily from one page to other.

E.g. About is menu

There may be many submenus for ‘About’ such as–

#Contact us

#Career

#Press release

and many more . . .

These submenus will not be displayed all over time at your website.It will be visible once mouse cursor hover at ‘About’ menu.if dropdown has good design, it will help your website to look attractive.CSS also play important role because we add font size,font family,background color etc through css and if we add style in efficient way so it provide us attractive and user friendly design.

Main Content -

To create menu-submenu we need to create 1 html file,1 css file and 1 javascript file.

Since we want to keep code as simple as possible so we are separately creating javascript & css file.

HTML file – It contains menu & submenu names and associated navigation links.

JAVASCRIPT file – It contains functionality related to show & hide sub menus.

CSS file – It contains css like menus background color,submenus box style,dropdown width etc.

Menus

HTML file code - menusubmenu.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdown.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

</script>
<style type="text/css">
.nav {
position:relative;
width:600px;
padding:0 0 7px 10px;
margin-left:11px;
padding-top:7px;
float:center;
list-style:none;
line-height:10px;
background:#6696B7;
font-size:15px;
}

.link{
text-decoration:none;
font-size:15px;
font-weight:bold;
font-family:arial;
color:white;
}

</style>
</head>

<body>
<br><br>
<table class="nav">
<tr><td align="center"><a href="http://www.dynamicdrive.com" class="link">Home</a></td>
<td>|</td>
<td align="center">
<a href="http://www.dynamicdrive.com" class="link">About Us</a></td>
<td>|</td>
<td align="center">
<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu1" class="link">Download</a></td>
<td>|</td>
<td align="center">
<a href="http://www.dynamicdrive.com" data-flexmenu="flexmenu2" class="link">News & Weather</a></td>
<td>|</td>
<td align="center">
<a href="http://www.dynamicdrive.com" class="link">Contact Us</a></td>

</tr></table>


<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="#">Free e-books</a></li>
<li><a href="#">Mobile App</a></li>
<li><a href="#">Games</a></li>
</ul>
<ul id="flexmenu2" class="flexdropdownmenu">
<li><a href="#">Live news</a></li>
<li><a href="#">Sports News</a></li>
<li><a href="#">Weather News</a></li>
</ul>

</body>

</html>

Copy the above code and save file name as menusubmenu with html extension.

JAVASCRIPT file code - dropdown.js

jQuery.noConflict()

var flexdropdownmenu={
arrowpath: 'arrow.gif', //full URL or path to arrow image
animspeed: 200, //reveal animation speed (in milliseconds)
showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

//***** NO NEED TO EDIT BEYOND HERE
startzindex:1000,
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
builtflexmenuids: [], //ids of flex menus already built (to prevent repeated building of same flex menu)

positionul:function($, $ul, e, $anchor){
var istoplevel=$ul.hasClass('jqflexmenu') //Bool indicating whether $ul is top level flex menu DIV
var docrightedge=$(document).scrollLeft()+$(window).width()-40 //40 is to account for shadows in FF
var docbottomedge=$(document).scrollTop()+$(window).height()-40
if (istoplevel){ //if main flex menu DIV
var offsets=$anchor.offset()
var anchorsetting=$anchor.data('setting')
var x=offsets.left+anchorsetting.useroffsets[0]+(anchorsetting.dir=="h"? $anchor.outerWidth() : 0) //x pos of main flex menu UL
var y=offsets.top+anchorsetting.useroffsets[1]+(anchorsetting.dir=="h"? 0 : $anchor.outerHeight())
x=(x+$ul.data('dimensions').w > docrightedge)? x-(anchorsetting.useroffsets[0]*2)-$ul.data('dimensions').w+$anchor.outerWidth()+(anchorsetting.dir=="h"? -($anchor.outerWidth()*2) : 0) : x //if not enough horizontal room to the ridge of the cursor
y=(y+$ul.data('dimensions').h > docbottomedge)? y-(anchorsetting.useroffsets[1]*2)-$ul.data('dimensions').h-$anchor.outerHeight()+(anchorsetting.dir=="h"? ($anchor.outerHeight()*2) : 0) : y
}
else{ //if sub level flex menu UL
var $parentli=$ul.data('$parentliref')
var parentlioffset=$parentli.offset()
var x=$ul.data('dimensions').parentliw //x pos of sub UL
var y=0
x=(parentlioffset.left+x+$ul.data('dimensions').w > docrightedge)? x-$ul.data('dimensions').parentliw-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge parent LI
y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y
}
$ul.css({left:x, top:y})
},

showbox:function($, $flexmenu, e){
clearTimeout($flexmenu.data('timers').hidetimer)
$flexmenu.data('timers').showtimer=setTimeout(function(){$flexmenu.show(flexdropdownmenu.animspeed)}, this.showhidedelay[0])
},

hidebox:function($, $flexmenu){
clearTimeout($flexmenu.data('timers').showtimer)
$flexmenu.data('timers').hidetimer=setTimeout(function(){$flexmenu.hide(100)}, this.showhidedelay[1]) //hide flex menu plus all of its sub ULs
},

buildflexmenu:function($, $menu, $target){
$menu.css({display:'block', visibility:'hidden', zIndex:this.startzindex}).addClass('jqflexmenu').appendTo(document.body)
$menu.bind('mouseenter', function(){
clearTimeout($menu.data('timers').hidetimer)
})
$menu.bind('mouseleave', function(){ //hide menu when mouse moves out of it
flexdropdownmenu.hidebox($, $menu)
})
$menu.data('dimensions', {w:$menu.outerWidth(), h:$menu.outerHeight()}) //remember main menu's dimensions
$menu.data('timers', {})
var $lis=$menu.find("ul").parent() //find all LIs within menu with a sub UL
$lis.each(function(i){
var $li=$(this).css({zIndex: 1000+i})
var $subul=$li.find('ul:eq(0)').css({display:'block'}) //set sub UL to "block" so we can get dimensions
$subul.data('dimensions', {w:$subul.outerWidth(), h:$subul.outerHeight(), parentliw:this.offsetWidth, parentlih:this.offsetHeight})
$subul.data('$parentliref', $li) //cache parent LI of each sub UL
$subul.data('timers', {})
$li.data('$subulref', $subul) //cache sub UL of each parent LI
$li.children("a:eq(0)").append( //add arrow images
'<img src="'+flexdropdownmenu.arrowpath+'" class="rightarrowclass" style="border:0;" />'
)
$li.bind(flexdropdownmenu.triggerevt, function(e){ //show sub UL when mouse moves over parent LI
var $targetul=$(this).css('zIndex', ++flexdropdownmenu.startzindex).addClass("selected").data('$subulref')
if ($targetul.queue().length<=1){ //if 1 or less queued animations
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer=setTimeout(function(){
flexdropdownmenu.positionul($, $targetul, e)
$targetul.show(flexdropdownmenu.animspeed)
}, flexdropdownmenu.showhidedelay[0])
if (flexdropdownmenu.triggerevt=="click" && $(e.target).next('ul').length==1) //if LI being clicked on is a menu header
return false
}
})
$li.bind('mouseleave', function(e){ //hide sub UL when mouse moves out of parent LI
var $targetul=$(this).data('$subulref')
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer=setTimeout(function(){$targetul.hide(100).data('$parentliref').removeClass('selected')}, flexdropdownmenu.showhidedelay[1])
})
})
$menu.find('ul').andSelf().css({display:'none', visibility:'visible'}) //collapse all ULs again
this.builtflexmenuids.push($menu.get(0).id) //remember id of flex menu that was just built
},

init:function($, $target, $flexmenu){
this.triggerevt=(this.ismobile)? "click" : "mouseenter"
this.showhidedelay[0]=(this.ismobile)? 0 : this.showhidedelay[0]
if (this.builtflexmenuids.length==0){ //only bind click event to document once
$(document).bind("click", function(e){
if (e.button==0){ //hide all flex menus (and their sub ULs) when left mouse button is clicked
$('.jqflexmenu').find('ul').andSelf().hide()
}
})
}
if (jQuery.inArray($flexmenu.get(0).id, this.builtflexmenuids)==-1) //if this flex menu hasn't been built yet
this.buildflexmenu($, $flexmenu, $target)
if ($target.parents().filter('ul.jqflexmenu').length>0) //if $target matches an element within the flex menu markup, don't bind onflexmenu to that element
return
var useroffsets=$target.attr('data-offsets')? $target.attr('data-offsets').split(',') : [0,0] //get additional user offsets of menu
useroffsets=[parseInt(useroffsets[0]), parseInt(useroffsets[1])]
$target.data('setting', {dir: $target.attr('data-dir'), useroffsets: useroffsets}) //store direction (drop right or down) of menu plus user offsets
$target.bind(flexdropdownmenu.triggerevt, function(e){
$flexmenu.css('zIndex', ++flexdropdownmenu.startzindex)
flexdropdownmenu.positionul($, $flexmenu, e, $target)
flexdropdownmenu.showbox($, $flexmenu, e)
if (flexdropdownmenu.triggerevt=="click")
e.preventDefault()
})
$target.bind("mouseleave", function(e){
flexdropdownmenu.hidebox($, $flexmenu)
})
}
}

jQuery.fn.addflexmenu=function(flexmenuid, options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $target=$(this)
if (typeof options=="object"){ //if options parameter defined
if (options.dir)
$target.attr('data-dir', options.dir) //set/overwrite data-dir attr with defined value
if (options.offsets)
$target.attr('data-offsets', options.offsets) //set/overwrite data-offsets attr with defined value
}
if ($('#'+flexmenuid).length==1) //check flex menu is defined
flexdropdownmenu.init($, $target, $('#'+flexmenuid))
})
};

//By default, add flex menu to anchor links with attribute "data-flexmenu"
jQuery(document).ready(function($){
var $anchors=$('*[data-flexmenu]')
$anchors.each(function(){
$(this).addflexmenu(this.getAttribute('data-flexmenu'))
})
})

//ddlistmenu: Function to define a UL list menu dynamically

function ddlistmenu(id, className){
var menu=document.createElement('ul')
if (id)
menu.id=id
if (className)
menu.className=className
this.menu=menu
}

ddlistmenu.prototype={
addItem:function(url, text, target){
var li=document.createElement('li')
li.innerHTML='<a href="'+url+'" target="'+target+'">'+text+'</a>'
this.menu.appendChild(li)
this.li=li
return this
},
addSubMenu:function(){
var s=new ddlistmenu(null, null)
this.li.appendChild(s.menu)
return s

}

}

Copy the above code and save file name as dropdown with js extension.

CSS file code - dropdown.css

.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/

font: normal 13px Verdana;

margin: 0;

padding: 0;

position: absolute;

left: 0;

top: 0;

list-style-type: none;

background: white;

border: 1px solid black;

border-bottom-width: 0;

visibility: hidden;

display: none; /*collapse all sub menus to begin with*/

box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/

-webkit-box-shadow: 3px 3px 8px #818181;

-moz-box-shadow: 3px 3px 8px #818181;

}

.flexdropdownmenu li{

position: relative;

}

.flexdropdownmenu li a{

display: block;

width: 160px; /*width of menu (not including side paddings)*/

color: black;

font-weight:bold;

background: #6696B7;

border-bottom: 1px solid white;

text-decoration: none;

padding: 4px 5px;

}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/

display: inline-block;

width: 170px; /*width of menu (include side paddings of LI A*/

}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{

background: #336699;

}

.rightarrowclass{

position: absolute;

top: 6px;

right: 5px;

}

Copy the above code and save file name as dropdown with css extension.

Copy above codes in particular file and save all files in same directory.

Keep all files in same folder and run menusubmenu.html with any browser.Your page will look like below image -

Menu with submenus

Here we have menus Home,About Us,Download,News & Weather and Contact Us and submenus for 'Download' & 'News & weather' menu.

We can also add submenus for other categories too same like these category.

You need to make changes in your html file to change/edit menus & submenus name and links.You can add links to redirect to other page under href attribute.

see below html code-

<li><a href="www.abc.com/ebooks">Free e-books</a></li>

<li><a href="www.abc.com/mobapp">Mobile App</a></li>

<li><a href="www.abc.com/games">Games</a></li>

</ul>

here user click on 'Free e-books' then flow will redirect to given path and appropriate website page will open.

HTML Blog

Thursday, 16 October 2014

Change form fields for selected radio buttons through jquery

Tuesday, 7 October 2014

Create horizontal dropdown(menu with submenu) by using simple html & css