Как верстать шапку сайта/навбар?

Question

Как создается в самом деле шапка сайта, ну или Навбар? В каждом сайте прописано "navbar", это скорее всего используется функции Бутстрапа. Но когда я попытался сделать с бутстрапом - у меня получилось совсем иначе.

Не подскажете как делаете вы? Для примера можно написать в шапке: Главная, Работа, Разместить резюме, Войти или Регистрация.

Буду благодарен, если поможете понять. Как создается шапка) А то так много вопросов и противоположно - так мало ответов

Answer 1

Сам начинающий в этом деле. Делал шапку так.Создавал контейнер для шапки,и в нем уже классы для навбара,затем стилизовал в css. Как это выглядит:

.container{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.header{
    padding-top: 30px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.nav{
    font-size: 14px;
    text-transform: uppercase;
    
}


.nav__link{
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    color: black;
    text-decoration: none;
    transition: color .1s linear;
    position: relative;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="C:\Users\User\Desktop\обучение\stack\style.css">

</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header__inner">
                <nav class="nav">
                    <a class="nav__link" href="#"> Главная </a>
                    <a class="nav__link" href="#"> Работа </a>
                    <a class="nav__link" href="#"> Резюме </a>
                    <a class="nav__link" href="#"> Войти/Регистрация </a>
                    
                </nav>
            </div>
        </div>
    </header>
</body>
</html>

Answer 2

На чистом css.

.menu__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  padding: 0;
  margin: 0;
  background: yellow;
}

.menu__list > li {
  list-style: none;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  position: relative;
  text-transform: uppercase;
  border-bottom: 4px solid transparent;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.menu__list > li:hover,
.menu__list > li:focus,
.menu__list > li.active,
.menu__list > li:active {
  border-bottom: 4px solid #E5B368;
}

.menu__list > li .menu__link {
  color: black;
  padding: 20px 0 16px;
  display: block;
  text-decoration: none;
}

.menu__list > li .menu__link.active,
.menu__list > li .menu__link:active {
  color: black;
  text-decoration: none;
}

.menu__list > li .menu__link:hover,
.menu__list > li .menu__link:focus {
  color: black;
  text-decoration: none;
}
.sub-menu__list {
  opacity: 0;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: -100;
  list-style: none;
  padding: 5px;
  background: orange;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.sub-menu__list > li {
  background: white;
}

.sub-menu__list > li:last-child .sub-menu__link,
.sub-menu__list > li:last-child .sub-sub-menu__link {
  border-bottom: none;
}

.sub-menu__list > li .sub-menu__link,
.sub-menu__list > li .sub-sub-menu__link {
  color: #083352;
  display: block;
  padding: 15px 20px 15px 15px;
  font-weight: 400;
  font-size: 15px;
  text-transform: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(197, 197, 197, 0.4);
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.sub-menu__list > li .sub-menu__link:hover,
.sub-menu__list > li .sub-menu__link.active,
.sub-menu__list > li .sub-menu__link:active,
.sub-menu__list > li .sub-sub-menu__link:hover,
.sub-menu__list > li .sub-sub-menu__link.active,
.sub-menu__list > li .sub-sub-menu__link:active {
  color: #083352;
  text-decoration: underline;
}

.menu__list > li > .sub-menu__wrapper {
  position: absolute;
  left: 0;
  top: -1000px;
}

.menu__list > li:hover > .sub-menu__wrapper {
  top: 100%;
}

.menu__list > li:hover > .sub-menu__wrapper > .sub-menu__list {
  z-index: 100;
  opacity: 1;
}

.menu__list > li:hover > .sub-menu__wrapper > .sub-menu__list > li > .sub-menu__wrapper > .sub-menu__list {
  left: 0;
  top: 0;
}

.menu__list > li:hover > .sub-menu__wrapper > .sub-menu__list > li:hover > .sub-menu__wrapper > .sub-menu__list {
  z-index: 100;
  opacity: 1;
  left: 100%;
  top: 0;
}

.sub-menu__list > li {
  position: static;
}

.sub-menu__list > li:hover .sub-sub-menu__list {
  display: block;
}

<nav class="menu">
    <ul class="menu__list">
        <li><a class="menu__link parent" href="#">Отель</a>
            <div class="sub-menu__wrapper">
                <ul class="sub-menu__list">
                    <li><a class="sub-menu__link" href="#">О гостинице</a></li>
                    <li><a class="sub-menu__link" href="#">Вакансии</a></li>
                    <li><a class="sub-menu__link" href="#">Новости</a></li>
                </ul>
            </div>
        </li>
        <li><a class="menu__link" href="#">Номера</a></li>
        <li><a class="menu__link" href="#">Рестораны</a></li>
        <li><a class="menu__link" href="#">Фитнес и спа</a></li>
    </ul>
</nav>

БЛОГ НА HUSL

Как верстать шапку сайта/навбар?

Ответы (2 шт):