Как да си направим навбар?

nFL-Hosting · March 15, 2019

Здравейте, днес ще ви покажа как можете да си направите навбар за вашата навигация.

1.1 Първият ни пост трябва да отворим index.html иначе няма как да добавите навигацията която ще по искате вие да заложите.

2.2 Избирате си едно меню къдете трябва да добавите. Тези неща работят с html и css

3.3 Сега ще ви дам кода което яе ви е пред очите.

HTML Code:

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

Тук ще добавите на нов раздел което трябва да създадете нов файл styles.css. И след това кода го слагате в раздела където му е мястото.

След като довуршите всички условия трябва да ви изглежда както снимката.

Demo:

nFL-Hosting · March 15, 2019

4.4 Сега тук ще добавя кода за Example menu.

styles.css

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

k1kkk · July 28, 2021

На 15.03.2019 г. at 13:58, nFL-Hosting написа:
Здравейте, днес ще ви покажа как можете да си направите навбар за вашата навигация.

1.1 Първият ни пост трябва да отворим index.html иначе няма как да добавите навигацията която ще по искате вие да заложите.

2.2 Избирате си едно меню къдете трябва да добавите. Тези неща работят с html и css

3.3 Сега ще ви дам кода което яе ви е пред очите.

HTML Code:
<!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>
Тук ще добавите на нов раздел което трябва да създадете нов файл styles.css. И след това кода го слагате в раздела където му е мястото.

След като довуршите всички условия трябва да ви изглежда както снимката.

Demo:

Благодаря.

Sign In

Как да си направим навбар?

Recommended Posts

nFL-Hosting

Link to comment

Share on other sites

nFL-Hosting

Link to comment

Share on other sites

k1kkk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Available Subscriptions