0% found this document useful (0 votes)

157 views43 pages

Css Menu and Hexa Colors

The document discusses how to create navigation bars using HTML and CSS. It provides examples of creating vertical and horizontal navigation bars from unordered lists. For vertical bars, the links are styled as block elements and given width. For horizontal bars, list items can be displayed inline or floated left. Additional styles are demonstrated like active links, borders, centering text, and fixed positioning. The examples show how basic navigation bars can be transformed into customizable navigation elements.

Uploaded by

alpha joy tinaza

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

157 views43 pages

Css Menu and Hexa Colors

Uploaded by

alpha joy tinaza

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

You are on page 1/ 43

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>
<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>

</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 {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<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>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 {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;

li a {
display: block;
background-color: #dddddd;
}
</style>
</head>
<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>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 {
list-style-type: none;
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>
<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>

</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 {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {

display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<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>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>
</ul>

</body>
</html>

li a {
display: block;

color: #000;
padding: 8px 16px;
text-decoration: none;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>
<li><a class="active" 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>

</body>
</html>

Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}

ul {
list-style-type: none;

margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>

</head>
<body>

<ul>
<li><a class="active" 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>

<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 {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<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>

</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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

li {
float: left;
}

li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<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><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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dddddd;
}

li {
float: left;
}

li a {
display: block;
padding: 8px;
}
</style>
</head>
<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>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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

li a:hover {
background-color: #111;
}
</style>
</head>
<body>

<ul>
<li><a class="active" 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>

</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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;

}
</style>
</head>
<body>

<ul>
<li><a class="active" 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>

</body>
</html>

Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

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;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;

position: fixed;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>
</head>

<body>

<ul>
<li><a class="active" 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>

<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>

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

</body>
</html>

Fixed Bottom
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;

position: fixed;
bottom: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>
</head>

<body>

<ul>
<li><a class="active" 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>

<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>

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

</body>
</html>

Gray Horizontal Navbar

An example of a gray horizontal navigation bar with a thin gray border:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li {
float: left;
}

li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #ddd;
}

li a.active {
color: white;
background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>

<li><a class="active" 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>

</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 Navigation
No ratings yet
CSS Navigation
27 pages
CSS Navigation Bar
No ratings yet
CSS Navigation Bar
5 pages
p61 Navigation
No ratings yet
p61 Navigation
14 pages
Navigation Bars in CSS
No ratings yet
Navigation Bars in CSS
7 pages
Menu - Dropdown
No ratings yet
Menu - Dropdown
9 pages
Overlapping of Image
No ratings yet
Overlapping of Image
7 pages
Css Navbar
No ratings yet
Css Navbar
11 pages
CSS 3
No ratings yet
CSS 3
17 pages
Ul Li Home Li Li About Us Li Li Community Li Li Careers Li Ul
No ratings yet
Ul Li Home Li Li About Us Li Li Community Li Li Careers Li Ul
2 pages
HTML Links and Navigation Guide
No ratings yet
HTML Links and Navigation Guide
16 pages
CSS Responsive Menu Guide
No ratings yet
CSS Responsive Menu Guide
12 pages
Копия 50 Free HTML & CSS Coding Templates - HubSpot
100% (1)
Копия 50 Free HTML & CSS Coding Templates - HubSpot
132 pages
CSS Navigation Bar
No ratings yet
CSS Navigation Bar
3 pages
TVL Comprog11-Q1-M18
No ratings yet
TVL Comprog11-Q1-M18
13 pages
MSWD Unit2
No ratings yet
MSWD Unit2
24 pages
35 Coding Templates For HTML, CSS, and Javascript
No ratings yet
35 Coding Templates For HTML, CSS, and Javascript
104 pages
Urgent Need
No ratings yet
Urgent Need
3 pages
Webpage Using Navigation Bar (CSS)
No ratings yet
Webpage Using Navigation Bar (CSS)
2 pages
Module 5 - Advanced CSS Techniques For Interactive and Visual Web Design
No ratings yet
Module 5 - Advanced CSS Techniques For Interactive and Visual Web Design
45 pages
Navigation Menus With CSS and JavaScript - Comprehensive Guide
No ratings yet
Navigation Menus With CSS and JavaScript - Comprehensive Guide
9 pages
CSS Lists
No ratings yet
CSS Lists
33 pages
Lesson 6
No ratings yet
Lesson 6
31 pages
2015 - s1 - Op - Week 11 Coding Day 19 Adding Naviagtion Bars
No ratings yet
2015 - s1 - Op - Week 11 Coding Day 19 Adding Naviagtion Bars
13 pages
Web Navigation Design Guide
No ratings yet
Web Navigation Design Guide
3 pages
HTML & CSS Styling Guide
No ratings yet
HTML & CSS Styling Guide
6 pages
Creating Usable Website Navigation For Desktop and Mobile Devices
No ratings yet
Creating Usable Website Navigation For Desktop and Mobile Devices
56 pages
Thesis Css Menu
100% (2)
Thesis Css Menu
6 pages
ICT 9-Lesson 3
No ratings yet
ICT 9-Lesson 3
37 pages
Lab 5 - Layout Website (New)
No ratings yet
Lab 5 - Layout Website (New)
14 pages
Horizontal Scroll Navigation Using HTML CSS
No ratings yet
Horizontal Scroll Navigation Using HTML CSS
5 pages
Cod HTML
No ratings yet
Cod HTML
8 pages
CSS Positioning: Tabbed Info Box Guide
No ratings yet
CSS Positioning: Tabbed Info Box Guide
14 pages
Responsive Dropdown Navigation Bar - Tania Rascia
No ratings yet
Responsive Dropdown Navigation Bar - Tania Rascia
37 pages
Create An Eye-Catching Breadcrumb Navigation in CSS With HTML
No ratings yet
Create An Eye-Catching Breadcrumb Navigation in CSS With HTML
8 pages
CSS Worksheet: JMC 105 - Drake University
No ratings yet
CSS Worksheet: JMC 105 - Drake University
7 pages
This Menu Turns Into A When Window Is Less Than 960px To Conserve Space
No ratings yet
This Menu Turns Into A When Window Is Less Than 960px To Conserve Space
3 pages
Css Worksheet Notes
100% (1)
Css Worksheet Notes
7 pages
Advance CSS Properties: Prepared By: Sonia Narang
No ratings yet
Advance CSS Properties: Prepared By: Sonia Narang
29 pages
CSS Menu Bar for Beginners
No ratings yet
CSS Menu Bar for Beginners
4 pages
Page in
No ratings yet
Page in
19 pages
2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2
No ratings yet
2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2
24 pages
Create A Stunning Menu in Css3
No ratings yet
Create A Stunning Menu in Css3
10 pages
HTML Lists Styling Techniques - Noupe Design Blog
No ratings yet
HTML Lists Styling Techniques - Noupe Design Blog
20 pages
CSS Tutorials
100% (1)
CSS Tutorials
16 pages
Belajar HTML
No ratings yet
Belajar HTML
21 pages
Navigation-With-Css-And-Jquery/: Working Version Here
No ratings yet
Navigation-With-Css-And-Jquery/: Working Version Here
18 pages
Article
No ratings yet
Article
12 pages
Web Assignment
No ratings yet
Web Assignment
7 pages
Css Pro - Merged
No ratings yet
Css Pro - Merged
13 pages
HTML Help
No ratings yet
HTML Help
1 page
Web Assign
No ratings yet
Web Assign
7 pages
Layouts
No ratings yet
Layouts
10 pages
Backkupindexmoney
No ratings yet
Backkupindexmoney
4 pages
Basic HTML & CSS Web Page Guide
No ratings yet
Basic HTML & CSS Web Page Guide
23 pages
Web and Tech PROGRAM
No ratings yet
Web and Tech PROGRAM
28 pages
Agile Board
No ratings yet
Agile Board
14 pages
Css Walk Through
No ratings yet
Css Walk Through
6 pages
Q 3 Module 19
No ratings yet
Q 3 Module 19
16 pages
Understanding Percentiles & Std Dev
No ratings yet
Understanding Percentiles & Std Dev
3 pages
Unit 7: Management Styles
No ratings yet
Unit 7: Management Styles
3 pages
Scaffold Erection NC2 Cert
No ratings yet
Scaffold Erection NC2 Cert
1 page
Project Management Methodologies: A Comparative Analysis: October 2012
No ratings yet
Project Management Methodologies: A Comparative Analysis: October 2012
14 pages
Grade 10 Quarter 3 Module 1 Edited
80% (5)
Grade 10 Quarter 3 Module 1 Edited
13 pages
Second Language Learning
No ratings yet
Second Language Learning
7 pages
2023 GR 10 MLIT P1 Marking Guideline
No ratings yet
2023 GR 10 MLIT P1 Marking Guideline
5 pages
02.05 Lab Electron Arrangement and EMR Line Spectra Virtual Lab
No ratings yet
02.05 Lab Electron Arrangement and EMR Line Spectra Virtual Lab
5 pages
Metasploit Express 4.9 User Guide PDF
No ratings yet
Metasploit Express 4.9 User Guide PDF
99 pages
AJACM 2010 5 2 Wang Juyi Interview Part 1 of 2 - Liu
No ratings yet
AJACM 2010 5 2 Wang Juyi Interview Part 1 of 2 - Liu
7 pages
Receptive and Expressive Errors Phonology June 06
No ratings yet
Receptive and Expressive Errors Phonology June 06
2 pages
D. L. Scharcter - The Seven Sins of Memory PDF
100% (1)
D. L. Scharcter - The Seven Sins of Memory PDF
22 pages
Application Form Agniveer
No ratings yet
Application Form Agniveer
2 pages
Application Form
No ratings yet
Application Form
2 pages
Utility Analysis of Demand
100% (1)
Utility Analysis of Demand
14 pages
French Ab Initio-IOA
100% (1)
French Ab Initio-IOA
7 pages
Intro To Signed Numbers
No ratings yet
Intro To Signed Numbers
10 pages
Soil Testing and Analysis
No ratings yet
Soil Testing and Analysis
21 pages
Travel Time and Congestion Assessment Along Ujala Circle (S.G. Highway Ahmedabad)
No ratings yet
Travel Time and Congestion Assessment Along Ujala Circle (S.G. Highway Ahmedabad)
10 pages
Back Water Tourism in Kerala: Challenges and Opportunities
No ratings yet
Back Water Tourism in Kerala: Challenges and Opportunities
6 pages
20th Circle Competition April 2024
No ratings yet
20th Circle Competition April 2024
1 page
Assignment No. 2A - Presentation
No ratings yet
Assignment No. 2A - Presentation
1 page
The Philosophy of Childhood
No ratings yet
The Philosophy of Childhood
10 pages
Indian Camp LitChart
No ratings yet
Indian Camp LitChart
14 pages
Ex-International Socialist Organization Member Exposes Rape Cover-Up by 2013 Steering Committee 3.11.19
80% (5)
Ex-International Socialist Organization Member Exposes Rape Cover-Up by 2013 Steering Committee 3.11.19
20 pages
Characterizing Mobile Ad Hoc Networks - The MANIAC Challenge Experiment
No ratings yet
Characterizing Mobile Ad Hoc Networks - The MANIAC Challenge Experiment
7 pages
Pre Qualification
No ratings yet
Pre Qualification
49 pages
Burny 2.8 Manual
100% (3)
Burny 2.8 Manual
474 pages
Malaysia Philippines Eye Contact-Eye Contact - Sit at Eye Level With The Patient
100% (1)
Malaysia Philippines Eye Contact-Eye Contact - Sit at Eye Level With The Patient
1 page

Css Menu and Hexa Colors

Uploaded by

Css Menu and Hexa Colors

Uploaded by

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%)

rgb(236, 19, 19)

hsl(0, 85%, 50%)

rgb(230, 25, 25)

hsl(0, 80%, 50%)

rgb(223, 32, 32)

hsl(0, 75%, 50%)

rgb(217, 38, 38)

hsl(0, 70%, 50%)

rgb(210, 45, 45)

hsl(0, 65%, 50%)

rgb(204, 51, 51)

hsl(0, 60%, 50%)