Супер Оферта

★ Искаш безплатен домейн ... https://твоятсайт.com, net, org, info, eu ... тогава може да се включиш в нашата игра ... "Free domain for you"
nFL-Hosting

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

Recommended Posts

Публикувано (Редактирано)

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

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:
rDXuAxi.png

Редактирано от nFL-Hosting

Сподели публикацията


Адрес на коментара
Сподели в други сайтове
Отговорено (Редактирано)

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>

Редактирано от nFL-Hosting

Сподели публикацията


Адрес на коментара
Сподели в други сайтове

Създайте нов акаунт или се впишете, за да коментирате

За да коментирате, трябва да имате регистрация

Създайте акаунт

Присъединете се към нашата общност. Регистрацията става бързо!

Регистрация на нов акаунт

Вход

Имате акаунт? Впишете се оттук.

Вписване