个人中心
gpt4 book ai didi

html - 设计的菜单有问题

转载 作者：太空狗 更新时间：2023-10-29 14:03:08 26 4
gpt4 key购买 nike

我有以下可以正常工作的菜单。我所需要的是，一旦选择了一个元素或将其悬停在所有尺寸的屏幕上，它的整个部分就会突出显示。目前只有每个元素的一部分被突出显示。

代码

<!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,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,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% 响应
  • 在大屏幕上工作正常
  • 在移动 View 中，我禁用了导航栏的折叠功能，因此设计在较小的设备上是相同的

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>

关于html - 设计的菜单有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30587975/

26 4 0
文章推荐： git - Jenkins 向来自 GitHub 的用户发送电子邮件通知，该用户在 dev 分支中推送了提交
文章推荐： 没有美元符号的android edittext货币格式
文章推荐： html - Bootstrap 导航栏 100% 宽度不起作用
文章推荐： javascript - 使用 Google App 脚本将多个文件上传到 Google Drive
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com