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 来做到这一点,因为我只是在学习它并且不知道任何少和不知道 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 - Google Chrome扩展程序可编辑视觉强制页面文本框

javascript - 将内部div固定在外部div的顶部,并在滚动外部div时防止内部div在外部div上溢出

php - 如何制作动态行跨度代码点火器

jquery - 如何在滚动时卡住表格的前两列

css - 更少的编译器使一切翻倍

javascript - Javascript中的LESS变量产生语法错误

java - HTML 标记的位置无效

javascript - 如何在加载页面时自动获取动画

javascript - 如何将css工作中断规则中的句子转换为\n字符串?

html - 是否可以使用变量用LESSCSS编写完整的CSS行?