Navigation Bar - Navigation Bar in CSS

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

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

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

 .active { 
 background-color: #58257b; 
 color: white; 
 } 

 ul { 
  border: 1px solid #db7093; 
 } 
 
 li { 
  text-align: center; 
  border-bottom: 1px solid #db7093; 
 } 
 
 li:last-child { 
  border-bottom: none; 
 } 

 ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 25%; 
  background-color: #f1f1f1; 
  height: 100%; /* chiều cao 100% */ 
  position: fixed; /* cố định thanh điều hướng cả khi cuộn để đọc website */ 
  overflow: auto; /* nếu nội dung quá dài sẽ có thêm thanh cuộn để xem phần còn lại */ 
 } 

Note :

1. The div element has a margin-left left margin of 25% because the side navigation bar has a width of 25%. If not using margin-left, the navigation bar will overlap on this div.
2. Use overflow: auto to add a scroll bar if the content is too long to see the rest.
3. This example may not work correctly on a mobile device.

Horizontal Navigation - Horizontal navigation bar

There are 2 ways to create a horizontal navigation bar, that is to use a list inline or float .

Navigation Bar - Navigation Bar in CSS Picture 8

Use Inline

Inline is a way to display elements on the same row. To create a horizontal navigation bar, you add the display: inline attribute to the element

1. in the example create a navigation bar at the beginning of the article.

 li { 
  display: inline; 
 } 

By default,

1. is a block element, we override display: inline, remove interrupts before and after each element, display only one line.

Use Float

Another way to create horizontal navigation bar is float elements

1. and layout format for navigation links:

 li { 
  float: left; 
 } 
 
 a { 
  display: block; 
  padding: 8px; 
  background-color: #e9d8f4; 
 } 

1. Use float: left so that the floating elements are side by side.
2. The display: block attribute allows you to display links as block elements, so you can click anywhere in the block to open the link (not just click on the text as before), you can specify padding, height, width, margin . if desired.
3. padding: 8px: block elements by default occupy the entire available width of the web page so that elements cannot float side by side. So, specify some padding to make them appear more neat.
4. background-color: # e9d8f4: ​​Add background color to each element (should be added
   instead of element).

1. Home page

1. Technology Village

1. Technology

1. Science

1. Life

For example horizontal navigation bar

Create a simple horizontal navigation bar with a background color and change the background color of the path when the user hovers over it:

Navigation Bar - Navigation Bar in CSS Picture 9

Horizontal navigation bar - Website Network administration

1. Home page

1. Technology Village

1. Technology

1. Science

1. Life

The current navigation path is active

Add 'active' to the current link so that users know what category they're currently viewing:

 .active { 
  background-color: #58257b; 
  color: white; 
 } 

Navigation Bar - Navigation Bar in CSS Picture 10

Align navigation link

You can push an element to the right of the screen according to the layout of the website using float: right

1. Introduce

1. Rules

1. Contact

1. Registration

Divide the navigation bar by border

Add a right border to all list items, except for the last item, to divide the navigation bar into clearer items.

 li { 
  border-right: 1px solid #db7093; 
 } 
 
 li:last-child { 
  border-right: none; 
 } 

Navigation Bar - Navigation Bar in CSS Picture 11

1. 
   Introduce

1. Rules

1. Contact

1. 
   Registration

The navigation bar has border

 ul { 
  border: 1px solid #d6b7eb; 
  background-color: #e9d8f4; 
 } 
 
 li a { 
  color: #black; 
 } 

Navigation Bar - Navigation Bar in CSS Picture 12

Fixed navigation bar

1. Use position: fixed

Fixed the navigation bar at the top or bottom of the page even when users use the scroll bar to move page content:

Fixed top side Fixed bottom side

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

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

Navigation Bar - Navigation Bar in CSS Picture 13 Navigation Bar - Navigation Bar in CSS Picture 14

1. Home page

1. LCN

1. Customer

1. CS

Introduction to CSS (by: TipsMake.com)

CSS helps a lot when writing a website in HTML.

What is CSS?

CSS stands for English phrase "Cascading Style Sheet".

CSS describes how HTML elements display on screens and methods
Other convenience.

CSS is very useful and convenient. It can control all pages
on a website.

The external stylesheet is stored as .CSS files.

Why should CSS be used?

CSS is used to define styles for pages on the website
you, including the design, the layout and the different display ways
Many devices with different screen sizes.

CSS helps solve big problems of HTML.

HTML does not have an element to format the web page. HTML only
used to create content for the site. When elements like and attribute
Colors are added to HTML 3.2, the nightmare of web developers
begin.

To solve this problem, the World Wide Web Consortium (W3C) has created
CSS, eliminating style formatting from HTML pages.

2. Use position: sticky

Using this attribute, the original menu will still have a flexible position until a certain location and "stick" there.

 ul { 
  position: -webkit-sticky; /* áp dụng với Safari */ 
  position: sticky; 
  top: 0; 
 } 

Navigation Bar - Navigation Bar in CSS Picture 15

Website Administration Network

Knowledge - Experience - FAQ

1. Home page

1. Technology Village

1. Technology

1. Science

1. Life

Introduction to CSS (by: TipsMake.com)

CSS helps a lot when writing a website in HTML.

What is CSS?

CSS stands for English phrase "Cascading Style Sheet".

CSS describes how HTML elements display on screens and methods
Other convenience.

CSS is very useful and convenient. It can control all pages
on a website.

The external stylesheet is stored as .CSS files.

Why should CSS be used?

CSS is used to define styles for pages on the website
you, including the design, the layout and the different display ways
Many devices with different screen sizes.

CSS helps solve big problems of HTML.

HTML does not have an element to format the web page. HTML only
used to create content for the site. When elements like and attribute
Colors are added to HTML 3.2, the nightmare of web developers
begin. Developing a large website that adds font or color information
sharpness on each page requires a lot of time.

To solve this problem, the World Wide Web Consortium (W3C) has created
CSS, eliminating style formatting from HTML pages
The meaning is related to the style that is included in the .css file and thanks to the file
External stylesheet information, you can change the entire website with just one
single file.

Previous article: Opacity / Transparency Properties in CSS

Next lesson: CSS Dropdown effect

Marvin Fry

Update 25 May 2019