Супер Оферта

★ Искаш безплатен домейн ... 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

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


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

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>

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


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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гост
Отговорете в темата...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Предишното ви съдържание бе възстановено.   Свободно редактиране

×   You cannot paste images directly. Upload or insert images from URL.