A simple HTML and CSS Navigational Menu for ABC Computers Sales and Services website template that I wrote a long time ago in my class in web design and development. I hope you will find my work useful in learning HTML and CSS.
I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me in the following email address for further details. If you want to advertise on my website kindly contact me also in my email address also. Thank you.
My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
My telephone number at home here in Bacolod City, Negros Occidental Philippines is +63 (034) 4335675.
Here in Bacolod City I also accepting computer repair, networking and Arduino Project development at a very affordable price.
Apple Logo
Sample Program Output
Program Listing
index.htm
<!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>ABC Computer Sales and Services</title>
<style type="text/css">
body { margin: 0; padding: 0; }
a, a:hover, a:active, a:visited, a:visited:hover { text-decoration: none; border: none; outline: none; }
div.nav {
margin: 18px auto 0px auto;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #fff #dfdfdf #dfdfdf #dfdfdf;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
/*-moz-box-shadow: 0px 1px 2px #ccc;*/
display: table;
}
div.nav ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #9f9f9f;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#6e6e6e));
background: -moz-linear-gradient(top, #b3b3b3, #6e6e6e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#6e6e6e');
display: inline-block;
list-style: none;
}
div.nav ul li {
margin: 0px 1px 0px 0px;
padding: 0px 0px 0px 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
background: -moz-linear-gradient(top, #cecece, #8c8c8c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
float: left;
}
div.nav ul li:first-child {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child {
margin-right: 0px !important;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li a {
margin: 0px 1px 0px 1px;
padding: 11px 33px 11px 33px;
background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
background: -moz-linear-gradient(top, #cacaca, #848484);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
float: left;
/*-*/
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #252525;
text-shadow: #cecece 0px 1px 0px;
}
div.nav ul li:first-child a {
border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
}
div.nav ul li:last-child a {
margin-right: 0px !important;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
}
div.nav ul li:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
background: -moz-linear-gradient(top, #999999, #5f5f5f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
}
div.nav ul li:hover a {
padding: 11px 33px 11px 33px;
background: -webkit-gradient(linear, left top, left bottom, from(#929292), to(#535353));
background: -moz-linear-gradient(top, #929292, #535353);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#929292', endColorstr='#535353');
/*-*/
color: #fff;
text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:active {
background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
background: -moz-linear-gradient(top, #242424, #3f3f3f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li:active a {
margin: 0px 0px 0px 0px;
padding: 9px 33px 11px 33px;
border-width: 2px 1px 0px 1px;
border-style: solid;
border-color: #282928 #3f3f3f #525051 #3f3f3f;
-webkit-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .05), inset 0 2px 5px #363636, inset 0 0 0 1px rgba(255, 255, 255, .1);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#5f5f5f));
background: -moz-linear-gradient(top, #999999, #5f5f5f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#5f5f5f');
color: #fff;
text-shadow: #454545 0px -1px 1px;
}
div.nav ul li:last-child:active a {
padding-right: 34px;
}
div.nav ul li.selected {
background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#3f3f3f));
background: -moz-linear-gradient(top, #242424, #3f3f3f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#3f3f3f');
}
div.nav ul li.selected a {
margin: 0px 0px 0px 0px;
padding: 9px 33px 11px 33px;
border-width: 2px 1px 0px 1px;
border-style: solid;
border-color: #282928 #3f3f3f #525051 #3f3f3f;
background: -webkit-gradient(linear, left top, left bottom, from(#373837), to(#525051));
background: -moz-linear-gradient(top, #373837, #525051);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#373837', endColorstr='#525051');
/*-*/
color: #fff;
text-shadow: #454545 0px -1px 1px;
}
div.nav ul li.selected:last-child a {
padding-right: 34px;
}
/*-----*/
div.nav ul li.logo a {
padding: 5px 34px 7px 34px;
}
div.nav ul li.logo:active a {
padding: 5px 35px 7px 35px;
border: none;
}
div.nav ul li.logo a img { width: 24px; height: 24px; }
/*-----*/
div.nav ul li.search a {
padding: 8px 9px 9px 7px;
}
div.nav ul li.search a input {
width: 120px;
height: 17px;
padding: 0px 0px 0px 20px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #888 #b0b0b0 #dedede #b0b0b0;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
background: #fff url(button_search.png) no-repeat 5px 3px;
/*-*/
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
font-size: 11px;
color: #7e7e7e;
}
div.nav ul li.search:hover, div.nav ul li.search:active {
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8c8c8c));
background: -moz-linear-gradient(top, #cecece, #8c8c8c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cecece', endColorstr='#8c8c8c');
}
div.nav ul li.search:hover a, div.nav ul li.search:active a {
margin: 0px 1px 0px 1px;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#848484));
background: -moz-linear-gradient(top, #cacaca, #848484);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#848484');
}
div.nav ul li.search:active a {
padding: 8px 9px 9px 7px;
}
</style>
</head>
<body>
<h1> <center> <font color="light blue">
ABC Computer Sales and Services </center> </h1> </font>
<div class="nav">
<ul>
<li class="logo"><a href="#"><img src="logo_apple.png" border="0" /></a></li>
<li><a href="#">About US</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
</body>
</html>
