Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Vertical Navbar

Vertical Navigation Bar

To construct a vertical navigation bar, customize the styling of the <a> elements within the list, along with incorporating the code from the preceding page.

Example

li a {
display: block;
width: 60px;
}

Explanation of the example:

display: block;–By displaying the links as block elements, the entire link area becomes clickable, not just the text. Additionally, it enables us to define the width (as well as padding, margin, height, etc., if desired).
width: 60px;-By default, block elements occupy the entire available width. However, we aim to define a width of 60 pixels.

You can also specify the width of `<ul>` and remove the width from `<a>`, as they will automatically occupy the entire available width when displayed as block elements. This adjustment will yield the same outcome as our previous example.

Example

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

Vertical Navigation Bar Examples

Construct a simple vertical navigation bar featuring a gray background, and alter the background color of the links upon mouse hover.

Home
News
Contact
About

Example

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

Active/Current Navigation Link

Apply an “active” class to the current link to indicate to the user which page they are currently on.

Example

.active {
background-color: #04AA6D;
color: white;
}

Center Links & Add Borders

Include text-align:center to center-align the links within either <li> or <a>.

Apply the border property to <ul> to create a border around the navigation bar. If borders are desired inside the navbar, add a border-bottom to all <li> elements except the last one.

Example

ul {
border: 1px solid #555;
}

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

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

Full-height Fixed Vertical Navbar

Create a full-height, “sticky” side navigation:

Example

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Please be aware that this example may not function correctly on mobile devices.