html - 在没有 JS 的情况下从 LESS 到 CSS 创建导航栏

标签 html css less navbar

我正在尝试复制我在 codepen 上找到的导航栏。

This is what I want 

// Scaffolding
*, *:before, *:after { box-sizing: border-box; }
body { background-color: #f5f5f5; color: #333; font-size: 14px; font-family: Verdana, Arial, sans-serif; line-height: 20px; }
a { text-decoration: none; transition: all 0.3s linear 0s; }

.area {
  display: flex; flex-flow: row wrap; align-items: stretch; margin-left: auto; margin-right: auto;
  @media (min-width: 768px) { width: 750px; }
  @media (min-width: 992px) { width: 970px; }
  @media (min-width: 1200px) { width: 1140px; }
}

// Navigation component
// ----------

// Variables
@navbar-height:              64px;
@navbar-background:          #fff;
@navbar-border:              #ddd;

@navbar-collapse-breakpoint: 768px;

@navbar-item-font-size:      14px;
@navbar-item-border-width:   4px;
@navbar-item-color:          #555;
@navbar-item-active-color:   #333;
@navbar-item-border:         transparent;
@navbar-item-active-border:  #673ab7;

// Component skeleton
.navbar-component {
  background-color: @navbar-background;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);

  & > .navbar {
    justify-content: space-between;
  }
}

// Component
.navbar {
  // Brand
  & > .brand {
    display: block;
    font-size: 16px;
    color: #777;
    margin: round((@navbar-height - 20) / 2);
  }

  // Toggle button
  & > .toggle {
    border: 0;
    background-color: transparent;
    outline: none;
    border: 0;
    display: inline-block;
    background-color: transparent;
    background-image: none;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    padding: round((@navbar-height - 20) / 2);

     @media (min-width: @navbar-collapse-breakpoint) {
       display: none;
     }
  }

  & > .toggle > .icon {
    position: relative;
    margin-top: 8px;
    margin-bottom: 8px;

    &,
    &:before,
    &:after {
      display: block;
      width: 24px;
      height: 3px;
      transition: background-color 0.3s linear, transform 0.3s linear;
      background-color: #555555;
    }

    &:before, &:after { position: absolute; content: ""; }
    &:before { top: -8px; }
    &:after { top: 8px; }
  }

  & > .toggle.-active > .icon {
    background-color: transparent;

    &:before { transform: translateY(8px) rotate(45deg); }
    &:after { transform: translateY(-8px) rotate(-45deg); }
  }

  // List of items
  & > .list {
    display: none;
    flex-flow: row nowrap;
    align-items: center;
    white-space: nowrap;

    @media (min-width: @navbar-collapse-breakpoint) {
      display: flex;
    }

    @media (max-width: @navbar-collapse-breakpoint) {
      position: fixed;
      top: @navbar-height;
      left: 0;
      width: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      border-top: 1px solid @navbar-border;
      background-color: @navbar-background;
    }

    &.-on {
      display: flex;
    }
  }

  & > .list > .item {
    display: block;
    flex-shrink: 0;
    height: @navbar-height;
    line-height: @navbar-height;
    padding-left: round((@navbar-height - 20) / 2);
    padding-right: round((@navbar-height - 20) / 2);
    text-transform: uppercase;
    color: @navbar-item-color;
    font-size: @navbar-item-font-size;
  }

  & > .list > .item.-link {
    line-height: @navbar-height + @navbar-item-border-width;
    color: @navbar-item-color;
    border-bottom: @navbar-item-border-width solid @navbar-item-border;

    &.-active,
    &:hover,
    &:focus {
      color: @navbar-item-active-color;
      border-bottom-color: @navbar-item-active-border;
    }
  }
}

I got so far already 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Arial, sans-serif;
  line-height: 20px;
}
body {
  background-color: #f5f5f5;
  color: #333;
}
.menu-container {
  background-color: #fff;
  height: 64px;
  border: #ddd;
  display: flex;
  justify-content: center;
  /* Shadow needs position "relative" */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  position: relative;
}
.navbar {
  /*border: 1px solid black;*/
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  }
.navbar-right {
  width: 25%;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}
.brand {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
}
.brand:hover {
   color: #333;
   border-bottom-style: solid;
   border-bottom-color: #673ab7;
 }
.about {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
}
.about:hover {
   color: #333;
   border-bottom-style: solid;
   border-bottom-color: #673ab7;
 }
.projects {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
}
.projects:hover {
   color: #333;
   border-bottom-style: solid;
   border-bottom-color: #673ab7;
 }
.contact {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
  }
.contact:hover {
   color: #333;
   border-bottom-style: solid;
   border-bottom-color: #673ab7;
 }

如您所见，我尝试使用基本的 CSS 来完成此操作，因为我只是在学习它，对 Less 和 JS 一无所知。 我看到的唯一区别是单击时菜单框的突出显示不会保留，并且它不会像示例中那样连接到下一个菜单点。 我确实相信我可以只用纯 CSS 来修复突出显示的宽度，但我不知道如何。

不知道有没有办法让菜单点的高亮在点击的时候停留？

需要一些帮助。

更新: So I almost got it

为了让高亮保持不变，我使用了 :focus 选择器。 

.about {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
  padding-left: 22px;
  padding-right: 22px;
}

.about:hover, .about:focus {
  color: #333;
  border-bottom-style: solid;
  border-bottom-color: #673ab7;
}

我只是不明白，所以突出显示连接到下一个菜单点。

最佳答案

我相信这就是您要找的。 编辑:我删除了右对齐部分，因为 flex-grow

不需要它 
.navbar-right {
    width: 25%;
    display: flex;
    flex-flow: row wrap;
}

您有 justify-content: space-around;，它将在元素周围均匀地添加空间。

也这样做

.about {
    color: #555;
    border: transparent;
    font-size: 14px;
    border-bottom: 4px solid transparent;
    text-decoration: none;
    transition: all 0.3s linear 0s;
    line-height: 64px;
    flex-grow: 1;
    text-align: center;
}

相应地改变你的其他。

我强烈建议将它放到一个不同的类中，因为您会经常重复使用它。你可以这样做:

.navbar-right a {
    color: #555;
    border: transparent;
    font-size: 14px;
    border-bottom: 4px solid transparent;
    text-decoration: none;
    transition: all 0.3s linear 0s;
    line-height: 64px;
    flex-grow: 1;
    text-align: center;
}

这样你就不会有那么多重复代码。

编辑:我为您添加了一个片段。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Arial, sans-serif;
  line-height: 20px;
}

body {
  background-color: #f5f5f5;
  color: #333;
}

.menu-container {
  background-color: #fff;
  height: 64px;
  border: #ddd;
  display: flex;
  justify-content: center;
  /* Shadow needs position "relative" */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  position: relative;
}

.navbar {
  /*border: 1px solid black;*/
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navbar-right {
  width: 25%;
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}

.brand {
  color: #555;
  border: transparent;
  font-size: 14px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  transition: all 0.3s linear 0s;
  line-height: 64px;
  padding-left: 22px;
  padding-right: 22px;
}

.brand:hover, .brand:focus {
  color: #333;
  border-bottom-style: solid;
  border-bottom-color: #673ab7;
}

.navbar-right a {
    color: #555;
    border: transparent;
    font-size: 14px;
    border-bottom: 4px solid transparent;
    text-decoration: none;
    transition: all 0.3s linear 0s;
    line-height: 64px;
    flex-grow: 1;
    text-align: center;
}

.navbar-right a:hover, .navbar-right a:focus {
  color: #333;
  border-bottom-style: solid;
  border-bottom-color: #673ab7;
}

.projects_text {
  background-color: green;
  height: 500px;
}

.contact_text {
  background-color: red;
  height: 500px;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Florian Dietrich</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header>
    <nav class="menu-container">
      <div class="navbar">
        <a href="#" class="brand">Florian Dietrich</a>
        <div class="navbar-right">
          <a href="#" class="about">About</a>
          <a href="#" class="projects">Projects</a>
          <a href="#" class="contact">Contact</a>
        </div>
      </div>
    </nav>
    </nav>
  </header>
  <section class="intro">
  </section>
  <section class="projects_text">
  </section>
  <section class="contact_text">
  </section>
</body>

</html>

关于html - 在没有 JS 的情况下从 LESS 到 CSS 创建导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48902086/

上一篇：javascript - 是否可以将文本选择限制为当前元素？

下一篇：javascript - `lazy load` 图像的最佳方法是什么，同时需要知道它们的高度和宽度？

相关文章：

javascript - 单击同一页面中的链接时如何打开 Accordion 的一部分

css - 带有 ASP.net MVC 的 LESS CSS 中资源的绝对路径

html - css 不适用于 bootstrap less

html - LESS - 按钮 :hover does not work

php - javascript错误控制台说xml不能是整个程序

java - JPanel 仅在最小化框架和最大化框架之后加载。

html - CSS 在一个 div 旁边放置一个 div

javascript - 本身工作得很好，但当我把它放在表格的其余部分时就会爆炸

css - 在 css 中移动标题以正确对齐

css - 如何在 bootstrap responsive 中创建媒体查询

©2024 IT工具网  联系我们