html – 设计菜单有问题

我有以下菜单正常工作.我需要的是,一旦选择或悬停项目,其整个部分将在所有尺寸的屏幕中突出显示.目前,每个项目的部分内容都会突出显示.

码

<!DOCTYPE html>
<html lang="en">
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">



<style>

.container-menu {
    width: 100%;
    background: none repeat scroll 0 0 rgb(0,0);
    min-height: 63px;
}

.menu-items {
    max-width: 1130px;
    width: 100%;
    height: 100%;
    margin: 0 auto; //
    text-align: center;
    text-align: left;
    position: relative;
    padding-top: 36px;
    text-align: center;
}

.menu-items li {
    background-color: rgb(0,0);
}

.menu-items #home {
    background-color: green;
}
.menu-items {
    position: relative;
}

.menu-items a {
    color: #fff;
}

.menu-items ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.menu-items li {
    display: inline;
    border-left: 1px solid #fff;
}

.menu-items li:last-child {
    border-right: 1px solid #fff;
}

.burger {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    right: 7px;
    display: none;
}

.menu-items li:hover {
    background-color: green;
}

@media only screen and (max-width: 720px) {
    .burger {
        display: block;
    }
    .menu-items ul {
        display: none;
    }
    .menu-items li {
        display: block;
        border: 0;
    }
    .container-menu>img {
        display: none;
    }
}


@media ( min-width :1500px) {
    .menu-items li {
        padding: 8px 38px;
    }
}

@media ( min-width : 979px) and (max-width:1500px) {
    .menu-items li {
        border-left: 1px solid #fff;
        display: inline;
        padding: 8px 15px;
    }
}

@media ( min-width : 768px) and (max-width: 979px) {

    .menu-items li {
        border-left: 1px solid #fff;
        display: inline;
        padding: 8px 15px;
    }
    .item {
        height: 186px !important;
    }

}

@media ( max-width : 767px) {

    .container-menu {
        min-height: 63px;
    }
    .menu-items li {
        border-left: 1px solid #fff;
        padding: 8px 12px;
    }

}

@media ( max-width : 480px) {
    .container-menu {
        min-height: 48px;
    }
    .menu-top-center {
        width: 100%;
    }
    .menu-top-right {
        padding-bottom: 4px;
    }
}
</style>
</head>


<body>


<header>
    <div class="container-menu">
        <div class="menu-items">
            <ul id="">
                <li id="home"><a href="#"><i class="fa fa-home f24"></i>
                        Home</a></li>
                <li id="item1"><a href="#">Item 1</a></li>
                <li id="item2"><a href="#">Item 2</a></li>
                <li id="mitem3"><a href="#">Item 3</a></li>
                <li id="item4"><a href="#">Item 4</a></li>
                <li id="item5"><a href="#">Item 5</a></li>
                <li id="item6"><a href="#">Item 6</a></li>
                <li id="item7"><a href="#">Item 7</a></li>
            </ul>
            <div class="burger hidden-md">
                <i class="fa fa-align-justify fa-2x"></i>
            </div>
        </div>
    </div>
</header>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
            $('.burger').click(function() {
                $('.menu-items ul').toggleClass("visible");
            });
        });
</script>
</body>


</html>

解决方法

我根据你的图片完全重新设计了新的导航栏.请看一看.

>它100％响应
>大屏幕工作正常
>在移动视图中,我已禁用导航栏的折叠,因此在较小的设备中设计将相同

body {
  line-height: 0 !important;
}
.navbar-collapse.collapse {
  display: block!important;
}
.navbar-nav>li,.navbar-nav {
  float: left !important;
}
.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}
.navbar-right {
  float: right!important;
}
.navbar > .container {
  text-align: center !important;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
  float: none !important;
  display: inline-block !important;
}
.collapse.navbar-collapse {
  float: none !important;
  display: inline-block!important;
  width: auto !important;
  clear: none !important;
}
.navbar {
  position: relative !important;
}
.back-stripe {
  /*display: none;*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 75px;
  z-index: 999999;
  background-image: url('http://i59.tinypic.com/2yvucqw.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.navbar-default {
  background: #4C0084 !important;
}
.navbar-default .navbar-nav > li:first-child {
  border-left: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li {
  Box-sizing: border-Box;
  border-right: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li > a {
  color: #fff !important;
  font-weight: bold !important;
}
.navbar-default .navbar-nav > li > a.active {
  background: #FFA600 !important;
}
.navbar-default .navbar-nav > li > a:hover {
  background: #FFA600 !important;
  color: #fff !important;
}
.navbar-nav {
  margin: 0 !important;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="back-stripe"></div>
  <div class="container" style="padding-top: 3%;margin-top:-4px;">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#" class="active">Home</a>
        </li>
        <li><a href="#">Item2</a>
        </li>
        <li><a href="#">Item3</a>
        </li>
        <li><a href="#">Item4</a>
        </li>
        <li><a href="#">Item5</a>
        </li>
        <li><a href="#">Item6</a>
        </li>
        <li><a href="#">Item7</a>
        </li>
      </ul>
    </div>
  </div>
</div>

原文链接：https://www.f2er.com/html/224978.html

html – 设计菜单有问题

解决方法

猜你在找的HTML相关文章