Css Menu and Hexa Colors

Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
sense:
Example
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Now let's remove the bullets and the margins and padding from the list:
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
</ul>
</body>
</html>
Example explained:
list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to
the code above:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
Example explained:
display: block; - Displaying the links as block elements makes the whole link area
clickable (not just the text), and it allows us to specify the width (and padding, margin,
height, etc. if you want)

width: 60px; - Block elements take up the full width available by default. We want to
specify a 60 pixels width
You can also set the width of <ul>, and remove the width of <a>, as they will take up the full
width available when displayed as block elements. This will produce the same result as our
previous example:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 60px;
li a {
display: block;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change
the background color of the links when the user moves the mouse over them:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
</ul>
</body>
</html>
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
color: white;
}
</style>
</head>
<body>

<p>In this example, we create an "active" class with a green background color and a white text.
The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
</ul>
</body>
</html>
Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also
want borders inside the navbar, add a border-bottom to all <li> elements,
except for the last one:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
color: white;
}
color: white;
}
</style>
</head>
<body>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>
<ul>
</ul>
</body>
</html>
Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
width: 25%;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
color: white;
}
color: white;
}
</style>
</head>
<body>
<ul>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">

<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is
set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the
sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar.
Using inline or floating list items.
Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as
inline, in addition to the "standard" code above:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Example explained:
display: inline; - By default, <li> elements are block elements. Here, we

remove the line breaks before and after each list item, to display them on
one line
Floating List Items

Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</head>
<body>
<ul>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected

results.</p>
<p>A background color is added to the links to show the link area. The whole link area is
clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going
outside of the list.</p>
</body>
</html>
Example explained:
float: left; - use float to get block elements to slide next to each other
display: block; - Displaying the links as block elements makes the whole
link area clickable (not just the text), and it allows us to specify padding
(and height, width, margins, etc. if you want)
padding: 8px; - Since block elements take up the full width available,
they cannot float next to each other. Therefore, specify some padding to
make them look good
background-color: #dddddd; - Add a gray background-color to each a

element
Tip: Add the background-color to <ul> instead of each <a> element if you
want a full-width background color:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the list instead of each link to create a full-width background
color.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going
outside of the list.</p>
</body>
</html>
Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and
change the background color of the links when the user moves the mouse over
them:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
li a:hover {
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she
is on:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
Border Dividers
Add the border-right property to <li> to create link dividers:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border-right:1px solid #bbb;

}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a href="#about">About</a></li>
</ul>
</body>
</html>
Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when
the user scrolls the page:
Fixed Top
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>


</div>
</body>
</html>
Fixed Bottom
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom of the page while scrolling</h2>


</div>
</body>
</html>
Gray Horizontal Navbar

An example of a gray horizontal navigation bar with a thin gray border:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
}
background-color: #ddd;
}
li a.active {
color: white;
}
</style>
</head>
<body>
<ul>

</ul>
</body>
</html>
Black Text
Shadow
White Text
Shadow
Red
#ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
Lighter / Darker:
100
%
95%
90%
85%
80%
75%
70%
65%
60%
55%
50%
45%
40%
35%
30%
#ffffff
#ffe6e6
#ffcccc
#ffb3b3
#ff9999
#ff8080
#ff6666
#ff4d4d
#ff3333
#ff1a1a
#ff0000
#e6000
0
#cc0000
#b3000
0
#99000
0
25%
20%
15%
10%
5%
0%
#80000
0
#66000
0
#4d000
0
#33000
0
#1a000
0
#00000
0
Hue
Hue Hex
Rgb
Hsl
rgb(255, 0, 0)
hsl(0, 100%, 50%)
15 #ff4000
rgb(255, 64, 0)
hsl(15, 100%, 50%)
30 #ff8000
rgb(255, 128, 0)
hsl(30, 100%, 50%)
45 #ffbf00
rgb(255, 191, 0)
hsl(45, 100%, 50%)
60 #ffff00
rgb(255, 255, 0)
hsl(60, 100%, 50%)
75 #bfff00
rgb(191, 255, 0)
hsl(75, 100%, 50%)
90 #80ff00
rgb(128, 255, 0)
hsl(90, 100%, 50%)
0 #ff0000
105 #40ff00
rgb(64, 255, 0)
hsl(105, 100%, 50%)
120 #00ff00
rgb(0, 255, 0)
hsl(120, 100%, 50%)
135 #00ff40
rgb(0, 255, 64)
hsl(135, 100%, 50%)
150 #00ff80
rgb(0, 255, 128)
hsl(150, 100%, 50%)
165 #00ffbf
rgb(0, 255, 191)
hsl(165, 100%, 50%)
180 #00ffff
rgb(0, 255, 255)
hsl(180, 100%, 50%)
195 #00bfff
rgb(0, 191, 255)
hsl(195, 100%, 50%)
210 #0080ff
rgb(0, 128, 255)
hsl(210, 100%, 50%)
225 #0040ff
rgb(0, 64, 255)
hsl(225, 100%, 50%)
240 #0000ff
rgb(0, 0, 255)
hsl(240, 100%, 50%)
255 #4000ff
rgb(64, 0, 255)
hsl(255, 100%, 50%)
270 #8000ff
rgb(128, 0, 255)
hsl(270, 100%, 50%)
285 #bf00ff
rgb(191, 0, 255)
hsl(285, 100%, 50%)
300 #ff00ff
rgb(255, 0, 255)
hsl(300, 100%, 50%)
315 #ff00bf
rgb(255, 0, 191)
hsl(315, 100%, 50%)
330 #ff0080
rgb(255, 0, 128)
hsl(330, 100%, 50%)
345 #ff0040
rgb(255, 0, 64)
hsl(345, 100%, 50%)
360 #ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
Saturation
Sat Hex
Rgb
Hsl
rgb(255, 0, 0)
hsl(0, 100%, 50%)
95% #f90606
rgb(249, 6, 6)
hsl(0, 95%, 50%)
90% #f20d0d
rgb(242, 13, 13)
hsl(0, 90%, 50%)
85% #ec1313
rgb(236, 19, 19)
hsl(0, 85%, 50%)
80% #e61919
rgb(230, 25, 25)
hsl(0, 80%, 50%)
100% #ff0000
75% #df2020
rgb(223, 32, 32)
hsl(0, 75%, 50%)
70% #d92626
rgb(217, 38, 38)
hsl(0, 70%, 50%)
65% #d22d2d
rgb(210, 45, 45)
hsl(0, 65%, 50%)
60% #cc3333
rgb(204, 51, 51)
hsl(0, 60%, 50%)
55% #c63939
rgb(198, 57, 57)
hsl(0, 55%, 50%)
50% #bf4040
rgb(191, 64, 64)
hsl(0, 50%, 50%)
45% #b94646
rgb(185, 70, 70)
hsl(0, 45%, 50%)
40% #b34d4d
rgb(179, 77, 77)
hsl(0, 40%, 50%)
35% #ac5353
rgb(172, 83, 83)
hsl(0, 35%, 50%)
30% #a65959
rgb(166, 89, 89)
hsl(0, 30%, 50%)
25% #9f6060
rgb(159, 96, 96)
hsl(0, 25%, 50%)
20% #996666
rgb(153, 102, 102)
hsl(0, 20%, 50%)
15% #936c6c
rgb(147, 108, 108)
hsl(0, 15%, 50%)
10% #8c7373
rgb(140, 115, 115)
hsl(0, 10%, 50%)
5% #867979
rgb(134, 121, 121)
hsl(0, 5%, 50%)
0% #808080
rgb(128, 128, 128)
hsl(0, 0%, 50%)
Lightness
Light Hex
Rgb
Hsl
rgb(255, 255, 255)
hsl(0, 100%, 100%)
95% #ffe6e6
rgb(255, 230, 230)
hsl(0, 100%, 95%)
90% #ffcccc
rgb(255, 204, 204)
hsl(0, 100%, 90%)
85% #ffb3b3
rgb(255, 179, 179)
hsl(0, 100%, 85%)
80% #ff9999
rgb(255, 153, 153)
hsl(0, 100%, 80%)
75% #ff8080
rgb(255, 128, 128)
hsl(0, 100%, 75%)
70% #ff6666
rgb(255, 102, 102)
hsl(0, 100%, 70%)
100% #ffffff
65% #ff4d4d
rgb(255, 77, 77)
hsl(0, 100%, 65%)
60% #ff3333
rgb(255, 51, 51)
hsl(0, 100%, 60%)
55% #ff1a1a
rgb(255, 26, 26)
hsl(0, 100%, 55%)
50% #ff0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)
45% #e60000
rgb(230, 0, 0)
hsl(0, 100%, 45%)
40% #cc0000
rgb(204, 0, 0)
hsl(0, 100%, 40%)
35% #b30000
rgb(179, 0, 0)
hsl(0, 100%, 35%)
30% #990000
rgb(153, 0, 0)
hsl(0, 100%, 30%)
25% #800000
rgb(128, 0, 0)
hsl(0, 100%, 25%)
20% #660000
rgb(102, 0, 0)
hsl(0, 100%, 20%)
15% #4d0000
rgb(77, 0, 0)
hsl(0, 100%, 15%)
10% #330000
rgb(51, 0, 0)
hsl(0, 100%, 10%)
5% #1a0000
rgb(26, 0, 0)
hsl(0, 100%, 5%)
0% #000000
rgb(0, 0, 0)
hsl(0, 100%, 0%)

Css Menu and Hexa Colors

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Css Menu and Hexa Colors

Caricato da

Copyright:

Formati disponibili

Navigation Bars

Having easy-to-use navigation is important for any web site.

Vertical Navigation Bar

height, etc. if you want)

Vertical Navigation Bar Examples

/* Change the link color on hover */

<h2>Vertical Navigation Bar</h2>

<h2>Vertical Navigation Bar</h2>

Center Links & Add Borders

<h2>Vertical Navigation Bar</h2>

Full-height Fixed Vertical Navbar

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

Horizontal Navigation Bar

Inline List Items

display: inline; - By default, <li> elements are block elements. Here, we

Floating List Items

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected

background-color: #dddddd; - Add a gray background-color to each a

Horizontal Navigation Bar Examples

Active/Current Navigation Link

border-right:1px solid #bbb;

Fixed Navigation Bar

<p>Some text some text some text some text..</p>

<p>Some text some text some text some text..</p>

<p>Some text some text some text some text..</p>

<p>Some text some text some text some text..</p>

Gray Horizontal Navbar

<li><a class="active" href="#home">Home</a></li>

hsl(0, 100%, 50%)

hsl(15, 100%, 50%)

hsl(30, 100%, 50%)

hsl(45, 100%, 50%)

hsl(60, 100%, 50%)

hsl(75, 100%, 50%)

hsl(90, 100%, 50%)

hsl(105, 100%, 50%)

hsl(120, 100%, 50%)

rgb(0, 255, 64)

hsl(135, 100%, 50%)

rgb(0, 255, 128)

hsl(150, 100%, 50%)

rgb(0, 255, 191)

hsl(165, 100%, 50%)

rgb(0, 255, 255)

hsl(180, 100%, 50%)

rgb(0, 191, 255)

hsl(195, 100%, 50%)

rgb(0, 128, 255)

hsl(210, 100%, 50%)

rgb(0, 64, 255)

hsl(225, 100%, 50%)

hsl(240, 100%, 50%)

hsl(255, 100%, 50%)

hsl(270, 100%, 50%)

hsl(285, 100%, 50%)

hsl(300, 100%, 50%)

hsl(315, 100%, 50%)

hsl(330, 100%, 50%)

hsl(345, 100%, 50%)

hsl(0, 100%, 50%)

hsl(0, 100%, 50%)

hsl(0, 95%, 50%)

rgb(242, 13, 13)

hsl(0, 90%, 50%)