本文介绍了如何在没有引导程序的情况下创建带有徽标和汉堡菜单的导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经尝试了3天但是无法将此徽标与我的导航列表联系在一起。我曾经考虑过使用bootstrap或模板但是我想从头开始这样做,所以我可以学习但是找不到解决方案。



我已经尝试过查看其他项目,代码笔,源代码,但似乎无法模仿他们的工作,最终不得不寻求帮助。



[]



我尝试了什么:



我已尝试过位置,显示,将其移到列表外,创建了一个div,没有任何工作。

I've been trying for 3 days but can't get this logo to be inline with my navigation list. I've thought about using bootstrap or templates but I want to do it from scratch so I can learn but can't find a solution.

I've tried looking at other projects, code pens, source codes but just can't seem to mimic what they do and have to finally ask for help.

A Pen by daplenrek[^]

What I have tried:

I've tried position, display, moved it outside list, created a div, nothing is working.

推荐答案

<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



And i added and removed some css please use the full css below

/* 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。



If add the above HTML and css code means you will get the logo and menu in single line.In responsive view you need to reduce space for menu to keep in single line.In mobile view You need to add jquery for menu toggle.


这篇关于如何在没有引导程序的情况下创建带有徽标和汉堡菜单的导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:43
查看更多