CSS navigation bar

CSS navigaiton bar - horizontal and vertical.

Horizontal navigation bar

CSS code:

<style>
    #h_nav_bar a { padding:15px; font-weight:bold; float:left; }
    #h_nav_bar a:link { color:#d0d0d0; background-color:#0000a0; }
    #h_nav_bar a:visited { color:#c0c0c0; background-color:#0000a0; }
    #h_nav_bar a:hover { color:#ffffff; background-color:#000060; }
    #h_nav_bar a:active { color:#f0f0f0; background-color:#00ff00; }
</style>

HTML code:

<div id="h_nav_bar">
    <a href="/en/web-design/html/html-link/html-anchor-link">Anchor link</a>
    <a href="/en/web-design/html/html-link/html-link-color">Link color</a>
    <a href="/en/web-design/html/html-link/mailto-link">Email link</a>
    <a href="/en/web-design/html/html-link/html-image-link">Image link</a>
    <a href="/en/web-design/html/html-link/link/html-text-link">Text link</a>
</div>

View:

 

#link_bar a is the style for all states of the link.

#link_bar a:link is the style of regular link.

#link_bar a:visited is the style of visited link.

#link_bar a:hover is the style of mouse hovered link.

#link_bar a:active is the style of link when pressed by the mouse.

Vertical navigation bar

CSS code:

<style>
    #v_nav_bar a { padding:15px; font-weight:bold; display:block; width:120px; }
    #v_nav_bar a:link { color:#d0d0d0; background-color:#0000a0; }
    #v_nav_bar a:visited { color:#c0c0c0; background-color:#0000a0; }
    #v_nav_bar a:hover { color:#ffffff; background-color:#000060; }
    #v_nav_bar a:active { color:#f0f0f0; background-color:#00ff00; }
</style>

HTML code:

<div id="v_nav_bar">
    <a href="/en/web-design/html/html-link/html-anchor-link">Anchor link</a>
    <a href="/en/web-design/html/html-link/html-link-color">Link color</a>
    <a href="/en/web-design/html/html-link/mailto-link">Email link</a>
    <a href="/en/web-design/html/html-link/html-image-link">Image link</a>
    <a href="/en/web-design/html/html-link/link/html-text-link">Text link</a>
</div>

View:

 

#link_bar a is the style for all states of the link.

#link_bar a:link is the style of regular link.

#link_bar a:visited is the style of visited link.

#link_bar a:hover is the style of mouse hovered link.

#link_bar a:active is the style of link when pressed by the mouse.


Currently, we have around 935 calculators, conversion tables and usefull online tools and features to make your life easier or simply help you to do your work or duties faster and in more effective way. These below are the most commonly used by many users at all

And we are still developing more. Our goal is to become the one-stop, go-to site for people who need to make quick calculations or who need to find quick answer for basic conversions.

Additionally, we believe the internet should be a source of free information. Therefore, all of our tools and services are completely free, with no registration required. We coded and developed each calculator individually and put each one through strict, comprehensive testing. However, please inform us if you notice even the slightest error – your input is extremely valuable to us. While most calculators on Justfreetools.com are designed to be universally applicable for worldwide usage, some are for specific countries only.


This website uses cookies to improve your experience, analyze traffic and display ads. Learn more