HTML Navigation Bar(nav), HTML Divisions

0 189

HTML Text Graphical-based Rollover Navigation Bar Divisions Elements

in this tutorial, I will briefly talk on HTML Text Graphical-based Rollover Navigation Bar Divisions Elements

HTML Navigation Bar(nav)

Navigation is a one of the most important elements in web designing. Navigation is an important design element which provides the users with a sense of orientation and guides them through the Web site. Menu links are always on navigation bar which can be the horizontal or vertical position. nav play a most important role in a website.in other words, it allows a user to navigate through the webpage and website.

Text-based Navigation Bar

the navigation menu is most used elements in a website comparing to others elements used in a website.it is important to make sure that user of your site should be able to easily navigate your site through its site structure.in text based nav no icon or graphic used it is only on text base to make easy to display in a browser by reducing loading page time. Text based navigation can be displayed either horizontally or vertically.

<!DOCTYPEhtml>
<html>
<head>
<title>Text-based Nav Bar</title>

</head>
<body>

<nav> 
<h1>This is a Text-based Navigation Bar </h1>

<a href="#">Home</font></a>|
<a href="#">News</font></a>|
<a href="#">Contact</font></a>|
<a href="#">About</font></a> 

</nav>

</body>
</html>

Graphical Navigation Bar

Graphical Navigation Bar looks more attractive and good comparing then to a text based Navigation Bar.it can make a more noticeable to a user visiting the website.in other words, we can say Graphical Navigation Bar is better than text based Navigation Bar comparing it as its visual look. Defiantly Graphical Navigation Bar takes a long time to load in browser

Graphical Navigation Bar with Rollover Effects

Graphical Navigation Bar with Rollover Effects similar to the graphical navigation bar except for the additional feature.Moving the mouse over the linked image change of image leads to an image swapping process. When the mouse is moved off the image, the image swaps back to the previous view. This rollover effect creates an interactive activity between the Web site and the visitor. This rollover effect has two different activities that include the image in the original view and the changed image after mouse rollover.

<!DOCTYPEhtml>
<html>
<head>
<title>Graphical Nav Bar</title>


<style> /* Main Navigation */ 

#nav { 
position:relative; 
width:620px; 
margin:0 auto; 
margin-top:50px; 
padding:10px; 
} 

ul#navigation { 
margin:0px auto; 
position:relative; 
float:left; 
border-left:1px solid #c4dbe7; 
border-right:1px solid #c4dbe7;
} 

ul#navigation li { 
display:inline; 
font-size:12px; 
font-weight:bold; 
margin:0; 
padding:0; 
float:left; 
position:relative; 
border-top:1px solid #c4dbe7; 
border-bottom:2px solid #c4dbe7;
} 

ul#navigation li a { 
padding:10px 25px; 
color:#616161; 
text-shadow:1px 1px 0px #fff; 
text-decoration:none; 
display:inline-block; 
border-right:1px solid #fff; 
border-left:1px solid #C2C2C2; 
border-top:1px solid #fff; 
background: #f5f5f5; 
-webkit-transition:color 0.2s linear, background 0.2s linear; 
-moz-transition:color 0.2s linear, background 0.2s linear; 
-o-transition:color 0.2s linear, background 0.2s linear; 
transition:color 0.2s linear, background 0.2s linear; 
} 

ul#navigation li a:hover { 
background:#f8f8f8; 
color:#282828; 
} 

ul#navigation li a.first { 
border-left: 0 none; 
} 

ul#navigation li a.last { 
border-right: 0 none;
} 

ul#navigation li:hover > a { 
background:#00FF00;
} 


/* Drop-Down Navigation */ 
ul#navigation li:hover > ul { 
/*these 2 styles are very important, being the ones which make the drop-down to appear on hover */ 
visibility:visible; opacity:1; 
}

ul#navigation ul, ul#navigation ul li ul { 
list-style: none; 
margin: 0; 
padding: 0; 
/*the next 2 styles are very important, being the ones which make the drop-down to stay hidden */ 
visibility:hidden; 
opacity:0; 
position:
absolute; z-index: 99999; 
width:180px; 
background:#f8f8f8; 
box-shadow:1px 1px 3px #ccc; 
/* css3 transitions for smooth hover effect */ 
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
transition:opacity 0.2s linear, visibility 0.2s linear;
} 

ul#navigation ul { 
top: 43px; 
left: 1px; 
}

ul#navigation ul li ul { 
top: 0; 
left: 181px; 
/* strong related to width:180px; from above */ 
}

ul#navigation ul li { 
clear:both; 
width:100%; 
border:0 none; 
border-bottom:1px solid #c9c9c9; 
} 

ul#navigation ul li a { 
background:none; 
padding:7px 15px; 
color:#616161; 
text-shadow:1px 1px 0px #fff; 
text-decoration:none; 
display:inline-block; 
border:0 none; 
float:left; 
clear:both; 
width:150px; 
} 
</style> 

</head>
<body>

<nav id="nav"> 
<ul id="navigation"> 
<li><a href="#"><img src="home.png" height="20" width="20">Home</img></a></li>

<li><a href="#"><img src="news.png" height="20" width="20">News</a></li> 

<li><a href="#"><img src="contact.png" height="20" width="20">Contact</a></li> 

<li><a href="#"><img src="About.png" height="20" width="20">About</a></li> 

</nav>

<br/>
<br/> 
<br/> 
<br/> 

<h1>This is a Graphical Navigation Bar</h1> 

</body>
</html>

HTML Divisions

Classing Block/Divisions Elements

It is a block level element used as a container for HTML elements .The tag can contain any other tag.the <div> tag used for block/division in HTML after coming HTML 5 new semantic tags reasonably reduce a lot of tag’s usage but it is still important in html5 where no other semantically appropriate element left that suits the purpose in a Web page development there <div> tag can be used.

Classes div make it possible to apply equal styles for equal <div> elements:

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

 

<!DOCTYPEhtml>
<html>
<head>
<title>div tag</title>

<style> 
div{ 
background-color: lightgrey;
width: 400px;
padding: 25px;
border: 20px solid navy;
margin: 20px;
}
</style>
</head>
<body>

<h1>Divisions Element</h1>
<div><p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div> 
</body>
</html>

Tips
The <div> tag is a block-level element.
The <div> tag can contain any other tag.
In HTML 5, the <div> tag can be found inside any element that can contain flow elements, such as other <div>, <address>, <section>, and <table>.

Comments

comments

Leave A Reply

Your email address will not be published.