douyi4544
2018-07-07 21:19
浏览 63
已采纳

自定义菜单,包含浮动文本和不对称边

I'd like to make a menu for my website that looks like this image. enter image description here

I want essentially three sections of the menu: a centered logo, a left side of menu items, and a right side of menu items. The dotted boxes denote those sections.

On the left section, I need two rows of menu items, that have even spacing dependent on the size of the box (spacing denoted by red lines). The spacing is also the same on the right section.

If someone could point me in the right direction or provide html/css, it would be very appreciated!

图片转代码服务由CSDN问答提供 功能建议

我想为我的网站制作一个看起来像这个图像的菜单。

我基本上需要三个菜单部分:一个居中的徽标,一个菜单项的左侧和一个菜单项的右侧。 虚线框表示那些部分。

在左侧部分,我需要两行菜单项,其间距取决于框的大小(由红线表示的间距)。 右侧部分的间距也相同。

如果有人能指出正确的方向或提供html / css,我们将非常感激! < / DIV>

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • duanmi8349 2018-07-07 23:21
    已采纳

    A better solution using only 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;
    }
    
    打赏 评论
  • drdyszuy488152 2018-07-07 21:44

    <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>

    Here, i assumed you use bootstrap because of your Tags, if not then im sorry. This works and you should throw a look at the Bootstrap Docs for more examples.

    Edit: if you want sections inside those columns that is also easily doable just throw a look at the docs

    </div>
    
    打赏 评论

相关推荐 更多相似问题