Member 13975405 Ответов: 1

Как создать навигационную панель с логотипом и меню гамбургеров без bootstrap

Я пытаюсь уже 3 дня, но не могу заставить этот логотип быть встроенным в мой навигационный список. Я думал об использовании bootstrap или шаблонов, но я хочу сделать это с нуля, чтобы я мог учиться, но не могу найти решение.

Я пробовал смотреть на другие проекты, кодовые ручки, исходные коды, но просто не могу имитировать то, что они делают, и в конце концов вынужден просить о помощи.

Ручка от дапленрека[^]

Что я уже пробовал:

Я пробовал позиционировать, отображать, перемещал его за пределы списка, создавал div, ничего не работает.

RedDk

Как насчет использования VisualStudio в режиме дизайна и просто перетаскивания всего, что вы пытаетесь отсортировать, туда, где, по вашему мнению, оно должно быть изначально на месте?

Код будет сгенерирован. Серьезно просто.

Richard Deeming

И очень плохая идея. Вы когда-нибудь смотрели на абсолютный беспорядок, который создает дизайнер Visual Studio? :)

1 Ответов

Рейтинг:
0

Member 12656556

Если вы не используете bootstrap, пожалуйста, используйте обычную структуру HTML div.

Здесь я добавил некоторую новую структуру div без bootstrap 

<header>
    <div class="container">
        <div class="clearfix">
            <div class="logo-div">
                <a href="#"><img alt="logo" class="image" src="https://via.placeholder.com/350x150"></a>
            </div>
            <div class="menu-div">
                <nav>
                    <ul>
                        <li><a href="#">About</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a class="active" href="#">Log in</a></li>
                        <li><a class="button" href="#">Sign up</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>


И я добавил и удалил некоторые css пожалуйста используйте полный css ниже
/* top right bottom left*/

body {
    margin: 0;
    padding: 0;
    font-family: open sans; 
    background-image: linear-gradient(to bottom right, #FBFCFD, #E8EBF3);
        
}

header {
    padding: 25px;
}
    
nav { 
    margin: 0;
    padding: 0;
    text-align: center;
}

nav a {
    display: block;
    text-decoration: none;
    color: #6A6A6A; 
    padding: 0 25px 0 25px; 
}
    
nav a:hover {
    color: #6945FF; 
}


nav li { 
    font-size: 15px;
    display: inline-block; 
    list-style-type: none;
}

.image {
    position: relative;
    display: inline;
    height: 3rem;
}
    
.active {
    color: #6945FF; 
    text-decoration: bold; 
    font-weight: 600; 
}

.button {
    font-weight: 400; 
    color: white;
    padding: 7px 20px 7px 20px; 
    background: #6945FF; 
    border-color: transparent;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 5rem;
    transition: all 0.1s ease-in-out;
}
  
.button:hover {
    color: white;
    box-shadow: 2px 2px 2px #888888;
}


.hero {
    padding: 240px;
    text-align: center;
    font-size: 35px;
}

footer {
    padding: 30px;
    text-align: center;
    font-size: 35px;
}
   
.logo-div{
  float:left;
}
.menu-div{
  float:right;
}
.container{
  max-width:1140px;
   width:100%;
  margin:0 auto;
}
.clearfix{
  display:inline-block;
   width:100%;
}


Если добавить вышеописанный HTML и css код, то вы получите логотип и меню в одной строке.В отзывчивом виде вам нужно уменьшить пространство для меню, чтобы держать его в одной строке.В мобильном представлении вам нужно добавить jquery для переключения меню.