Пользовательское меню с плавающим текстом и асимметричными сторонами

rdk спросил: 13 июня 2018 в 07:39 в: php

Я хотел бы создать меню для своего веб-сайта, похожее на этот образ.

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

В левом разделе мне нужны две строки элементов меню, которые имеют даже интервал, зависящий от размера окна (интервал, обозначенный красными линиями). Интервал также тот же в правой части.

Если кто-то может указать мне в правильном направлении или предоставить html / css, это было бы очень признательно!


2 ответа

Есть решение
Sean Stopnik ответил: 13 июня 2018 в 09:41

Лучшее решение, использующее только flexbox:

https://codepen.io/seanstopnik/pen/b5a8294dae7969c4c9fa7cfca470626c

HTML:

<header class="global-header" role="banner">
  <nav class="global-nav" role="navigation">
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 1</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 2</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 3</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 4</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 5</a></li>
    </ul>
    <a class="global-nav__logo" href="/"></a>
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">About</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Contact</a></li>
    </ul>
  </nav>
</header>
CSS
.global-header {
  background-color: #fff;
  padding: 10px;
}.global-nav {
  display: flex;
  justify-content: space-around;
}.global-nav__list {
  display: flex;
  width: 100%;
  height: 70px;
  flex-wrap: wrap;
  align-items: center;
}
.global-nav__list .global-nav__list-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.global-nav__list .global-nav__list-item:nth-child(1), .global-nav__list .global-nav__list-item:nth-child(2) {
  flex: 0 0 50%;
}
.global-nav__list .global-nav__list-item:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: red;
  content: '';
}.global-nav__link {
  position: relative;
  display: inline-block;
  color: #3cc7e3;
  background-color: #fff;
  padding: 0 6px;
  z-index: 1;
}
.global-nav__link:hover {
  color: #222;
}.global-nav__logo {
  flex: 0 0 200px;
  border-radius: 50%;
  background-color: blue;
  margin: 0 10px;
}
Badgy ответил: 13 июня 2018 в 08:04
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
  
    <div class="col-sm-5">
    
      <div class="row">
      
        <div class="col">
        Left Content 
        </div>
        
        <div class="w-100"></div>
        
         <div class="col">
        Left Content under
        </div>
        
      </div>
      
    </div>


    <div class="col-sm-2">
      Image?
    </div>
    
    <div class="col-sm-5">
      <span class="float-right">Right Content</span>
    </div>
    
  </div>
</div>

Здесь я предположил, что вы используете бутстрап из-за ваших тегов, если нет, то мне жаль. Это работает, и вы должны взглянуть на Документы Bootstrap для получения дополнительных примеров.

Изменить: если вы хотите, чтобы разделы внутри этих столбцов также легко выполнимы, просто взгляните на документы

Дополнительное видео по вопросу: Пользовательское меню с плавающим текстом и асимметричными сторонами

How to Create Transparent Drop Down Navigation Menu with CSS and HTML

Sticky Navbar On Scroll | Sticky Navigation Menu In HTML CSS And jQuery

Responsive Menu Navigation Using Only HTML & CSS