Title Menu bar using CSS and Hover

This post is basically showing how the each Menu title populates sub menu using hover functionality in easiest way. This is designed based on CSS styling and uses HTML table header. I tried in google to find this but I couldn’t and eventually I’ve developed it so that people like me will no longer suffer to find kind of examples.

See the following code snippets.

.header,.header ul  {
padding: 0;
margin: 1;
list-style: none;
width: 150px;
}
.header a {
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: block;
padding: 0px 0px 0px 0px;
margin: 1;
}
.header div {
display: inline;
width: 150px;
}
.header li {
float: center;
padding: 0px 8px 2px 0px;
width: 180px;
}
/* all hoover list items */
.header li ul {
position: absolute;
background: #A0CFEC;
padding: 0px 0px 0px 0px;
width: 150px;
left: -9999px;
border-style:solid;
border-color:black;
border-width:1px;
}
/* second-level lists */
.header li:hover ul {
left: auto;
}
/* nest list under hovered list items */
.header li ul li a {
color: black;
text-decoration: none;
display: block;
font-family: Times New Roman;
font-weight: 900;
font-size: 0.7em;
width:149px;
}
.header li ul li a:hover {
color: black;
background:#A0CFEC;
width=180px;
background: #90BAD4;
}
.down {
color: #808080;
font-family:arial;
font-size: 0.8em;
font-weight: bold;
}
.uid_spacing {
padding: 0px 95px 0px 0px;
}
.nid_spacing {
padding: 0px 80px 0px 0px;
}
.fn_spacing {
padding: 0px 80px 0px 0px;
}
.ln_spacing {
padding: 0px 60px 0px 0px;
}

I hope the above CSS code will help you to get the idea. If you want to test the page, just copy the following code and run it from your browser.

<HTML>
<HEAD>
<TITLE> HTML Hover functionality </TITLE>
<STYLE TYPE=”text/css”>
.header,.header ul  {
padding: 0;
margin: 1;
list-style: none;
width: 150px;
}
.header a {
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: block;
padding: 0px 0px 0px 0px;
margin: 1;
}
.header div {
display: inline;
width: 150px;
}
.header li {
float: center;
padding: 0px 8px 2px 0px;
width: 180px;
}
/* all hoover list items */
.header li ul {
position: absolute;
background: #A0CFEC;
padding: 0px 0px 0px 0px;
width: 150px;
left: -9999px;
border-style:solid;
border-color:black;
border-width:1px;
}
/* second-level lists */
.header li:hover ul {
left: auto;
}
/* nest list under hovered list items */
.header li ul li a {
color: black;
text-decoration: none;
display: block;
font-family: Times New Roman;
font-weight: 900;
font-size: 0.7em;
width:149px;
}
.header li ul li a:hover {
color: black;
background:#A0CFEC;
width=180px;
background: #90BAD4;
}
.down {
color: #808080;
font-family:arial;
font-size: 0.8em;
font-weight: bold;
}
.uid_spacing {
padding: 0px 95px 0px 0px;
}
.nid_spacing {
padding: 0px 80px 0px 0px;
}
.fn_spacing {
padding: 0px 80px 0px 0px;
}
.ln_spacing {
padding: 0px 60px 0px 0px;
}
</STYLE>

</HEAD>
<BODY>
<H3>HTML table header (like CSS menu bar) with hover functioanlity</H3>
<FORM ACTION=”” METHOD=”POST” NAME=”searchForm”>

<BR /></BR />
<TABLE WIDTH=”600″ BORDER=1 ID=”results”>
<THEAD>
<TR BGCOLOR=”#A0CFEC”>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Home<div></div><div id=”0_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Page home</a></li>
<li><a   href=”javascript:;”>Section home</a></li>
<li><a href=”javascript:void(0);” >Area home</a>
</li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Products<div></div><div  id=”1_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Scissor</a></li>
<li><a   href=”javascript:;”>Knife</a></li>
<li><a      href=”javascript:;”>Cutlery</a>
<li><a   href=”javascript:;”>Chain</a></li>
<li><a   href=”javascript:;”>Prounes</a></li>
<li><a      href=”javascript:;”>Iron sticks</a>
</li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Services<div></div><div id=”2_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Home Repairs</a></li>
<li><a   href=”javascript:;”>Auto Repairs</a></li>
<li><a   href=”javascript:;”>Computer Repairs</a></li>
<li><a   href=”javascript:;”>Phone Repairs</a></li>
<li><a   href=”javascript:;”>Mobile Repairs</a></li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Contact US<div></div><div id=”3_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Email</a></li>
<li><a   href=”javascript:;”>Phone</a></li>
<li><a      href=”javascript:;”>Mail</a></li>
<li><a      href=”javascript:;”>In-person</a></li>
</ul>
</li>
</ul>
</TH>
</TR>
</THEAD>

</TABLE>
</FORM>
</BODY>
</HTML>

Advertisements

HTML Table Column Sorting

Here I’m showing a simplest way of how to make each column do sorting in ascending and descending orders using simple javascript (you may definitely get an easy way of doing this from jQuery). But this one surely useful for some people at least.

to see the results, copy/download the code and open this in your browser, and click on any header’s uparrow and downarrow icons, then you see the results.
javascript code:-
<code>
function Compare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal &gt; bVal ? 1 : -1));
}
function CompareNumbers(a, b) {
var aVal = parseInt(a.value);
var bVal = parseInt(b.value);
return (aVal – bVal);
}
function sortTable(sortOn,sortOrder) {
var table = document.getElementById(‘results’);
var tbody = table.getElementsByTagName(‘TBODY’)[0];
var thead = table.getElementsByTagName(‘THEAD’)[0];
var rows = tbody.getElementsByTagName(‘TR’);
var rowArray = new Array();
for (var i=0, length=rows.length; i&lt;length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName(‘td’)[sortOn].firstChild.nodeValue;
if (rowArray[i].value == null){
var firstChild=rows[i].getElementsByTagName(‘td’)[sortOn].firstChild;
rowArray[i].value=firstChild.toString().substring(26, 35);
}
}
if(sortOrder==’dsc’){
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
rowArray.reverse();
}else{
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
}
var newTbody = document.createElement(‘tbody’);
for (var i=0, length=rowArray.length ; i&lt;length; i++) {
var row=rows[rowArray[i].oldIndex].cloneNode(true)
row.bgColor=”white”
if(i%2==1)
row.bgColor=”#FAF8CC”;
newTbody.appendChild(row);
}
var L=tbody.length;
while(L)table.removeChild(tbody[–L]);
var root=document.getElementById(‘ITable’);
var tab=document.createElement(‘table’);
tab.className=”mytable”;
tab.setAttribute(“WIDTH”,”600″);
tab.setAttribute(“border”,”1″);
tab.setAttribute(“ID”,”results”);
tab.appendChild(thead);
tab.appendChild(newTbody);
root.removeChild(table);
root.appendChild(tab);
}
</code>
CSS code:-
a{
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: inline;
margin: 1;
}

Here is complete HTML code to:
<HTML>
<HEAD>
<TITLE>
HTML table sorting
</TITLE>
<SCRIPT TYPE=”text/javascript”>
function Compare(a, b) {
var aVal = a.value;
var bVal = b.value;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
function CompareNumbers(a, b) {
var aVal = parseInt(a.value);
var bVal = parseInt(b.value);
return (aVal – bVal);
}
function sortTable(sortOn,sortOrder) {
var table = document.getElementById(‘results’);
var tbody = table.getElementsByTagName(‘TBODY’)[0];
var thead = table.getElementsByTagName(‘THEAD’)[0];
var rows = tbody.getElementsByTagName(‘TR’);
var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = new Object;
rowArray[i].oldIndex = i;
rowArray[i].value = rows[i].getElementsByTagName(‘td’)[sortOn].firstChild.nodeValue;
if (rowArray[i].value  == null){
var firstChild=rows[i].getElementsByTagName(‘td’)[sortOn].firstChild;
rowArray[i].value=firstChild.toString().substring(26, 35);
}
}
if(sortOrder==’dsc’){
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
rowArray.reverse();
}else{
if (sortOn==0){
rowArray.sort(CompareNumbers);
}else{
rowArray.sort(Compare);
}
}
var newTbody = document.createElement(‘tbody’);
for (var i=0, length=rowArray.length ; i<length; i++) {
var row=rows[rowArray[i].oldIndex].cloneNode(true)
row.bgColor=”white”
if(i%2==1)
row.bgColor=”#FAF8CC”;
newTbody.appendChild(row);
}
var L=tbody.length;
while(L)table.removeChild(tbody[–L]);
var root=document.getElementById(‘IDMTable’);
var tab=document.createElement(‘table’);
tab.className=”mytable”;
tab.setAttribute(“WIDTH”,”600″);
tab.setAttribute(“border”,”1″);
tab.setAttribute(“ID”,”results”);
tab.appendChild(thead);
tab.appendChild(newTbody);
root.removeChild(table);
root.appendChild(tab);
}

</SCRIPT>

<STYLE TYPE=”text/css”>

a{
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: inline;
margin: 1;
}

</STYLE>

</HEAD>
<BODY>
</BR />
<H3>HTML Table with column Sorting</H3>
<FORM ACTION=”” METHOD=”POST” NAME=”searchForm”>

<BR />
<div id=”IDMTable” >
<TABLE WIDTH=”600″ BORDER=1 ID=”results”>
<THEAD>
<TR BGCOLOR=”#A0CFEC”>
<TH ALIGN=left WIDTH=”25%”>UID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(0,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(0,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>NID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(1,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(1,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>First Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(2,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(2,’dsc’);”>&dArr;</a>
</TH>
<TH ALIGN=left WIDTH=”25%”>Last Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href=”#” onclick=”sortTable(3,’asc’);” href=”javascript:;”>&uArr;</a>
<a href=”#” onclick=”sortTable(3,’dsc’);”>&dArr;</a>
</TH>
</TR>
</THEAD>
<TBODY>

<TR BGCOLOR=>
<TD>45103</TD>
<TD>skaba</TD>
<TD>Sandra</TD>
<TD>Kabagambe</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>27057</TD>
<TD>skale</TD>
<TD>Su</TD>
<TD>Kalender</TD>
</TR>

<TR BGCOLOR=>
<TD>64559</TD>
<TD>skalle</TD>
<TD>Sylvia</TD>
<TD>Kalley</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>13235</TD>
<TD>rimsa</TD>
<TD>Rhin</TD>
<TD>Imsail</TD>
</TR>

<TR BGCOLOR=>
<TD>46662</TD>
<TD>namile</TD>
<TD>Nancy</TD>
<TD>Amile</TD>
</TR>

<TR BGCOLOR=#FAF8CC>
<TD>31805</TD>
<TD>mmclure</TD>
<TD>Maria</TD>
<TD>Mclure</TD>
</TR>

</TBODY>
</TABLE>
</div>
</FORM>
</BODY>
</HTML>