设计菜单有问题

时间：2015-06-02 05:25:17

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

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

代码 

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

5 个答案:

答案 0 :(得分：12)

我根据您的图片完全重新设计了新的导航栏。请看看。

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我可以通过添加以下代码来解决问题

.menu-items li{
   padding:16px 38px;
}

答案 2 :(得分：0)

  

如果我将顶部水平图像更改为弯曲的图像，菜单项的白色边框的高度将太短，我需要它们更高一点。 （没有头绪）

//不清楚，你在找这个吗？

enter image description here

//将border-bottom添加到@media li，

.menuitems li {
        display: block;
       border-left:0px;
        border-bottom:1px solid #fff;
    }
  

在汉堡风格中，最后一项的宽度有点短。 （不知道为什么）

//将padding:0添加到UL以删除第一个标签中的空白区域

.menuitems ul {
    list-style: none;
    margin: 0;
    padding:0;

}
  

我需要让所有菜单项更宽一些。 （改变宽度不起作用）

 .menuitems li {
    display: inline-block;
    padding: 10px 15px 10px 35px;
    border-left: 1px solid #fff;
    width:80px;
}

答案 3 :(得分：0)

将这些行更新为您的样式

.m-btn ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

它对我有用.....

修改

或试试这个

@media only screen and (max-width: 480px) {
    .m-btn ul {
      padding: 0;
    }
}

答案 4 :(得分：0)

我想我已经解决了你的问题。尝试使用此代码

<!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>
body {
    margin-bottom: 60px;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container-m-tp {
    width: 100%;
    background-color: orange;
}
.container-m-btn {
    width: 100%;
    background: none repeat scroll 0 0 rgb(75, 0, 130);
    min-height: 62px;
}
.container-m-btn>img {
    max-height: 40px;
    width: 100%;
    position: absolute;
    z-index: 99999;
}
.m-tp {
    max-width: 970px;
    max-width: 1237px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.m-btn {
    max-width: 1900px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    text-align: left;
    position: relative;
    padding-top: 35px;
    text-align: center;
}
.m-btn li:hover {
    background-color: orange;
}
.m-tp-center {
    display: inline-block;
    //
    width: 50%;
    width: 80%;
    height: 100%;
}
.m-tp-right {
    display: inline-block;
    float: right;
    height: 100%;
    margin-right: 3%;
    //
    width: 200px;
    //
    padding-left: 20px;
}
.m-btn {
    position: relative;
}
.m-btn a {
    color: #fff;
}
.m-btn ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
.m-btn li {
    display: inline;
    padding: 25px 32px 9px;
    border-left: 1px solid #fff;
}
.m-btn li:last-child {
    border-right: 1px solid #fff;
}
.burger {
    width: 25px;
    height: 25px;
    background-image: url(img/burger.png);
    position: absolute;
    top: 7px;
    right: 7px;
    display: none;
    color: #FFF;
}
@media only screen and (max-width:720px) {
    .burger {
        display: block;
    }
    .container-m-btn {
        min-height: 40px;
    }
    .m-btn ul {
        display: none;
        border-top: 1px #fff solid;
    }
    .m-btn li {
        display: block;
        border: none;
        padding: 16px 32px;
        border-bottom: 1px #fff solid;
    }
    .m-btn li:last-child {
        border-bottom: none;
    }
    .container-m-btn>img {
        display: none;
    }
}
.m-btn .visible {
    display: block;
}
.m-btn li:hover {
    background-color: orange;
}
.m-btn li:active {
    background-color: orange;
}
</style>
</head>
<body>
    <header>
        <div class="container-m-btn">
            <img src="http://i.stack.imgur.com/GRNPb.png" />
            <div class="m-btn">
                <ul id="">
                    <li id="item1"><a href="#"><i class="fa fa-home f24"></i> Home</a></li>
                    <li id="item2"><a href="#">Item2</a></li>
                    <li id="item3"><a href="#">Item3</a></li>
                    <li id="item4"><a href="#">Item4</a></li>
                    <li id="item5"><a href="#">Item5</a></li>
                    <li id="item6"><a href="#">Item6</a></li>
                    <li id="item7"><a href="#">Item7</a></li>
                    <li id="item8"><a href="#">Item8</a></li>
                </ul>
                <div class="burger"></div>
            </div>
        </div>
    </header>
    <style>
        .m-btn #item7 {
            background-color: orange;
        }
    </style>
    <div class="container">
        <p>This is body</p>
    </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/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() {
        $('.m-btn ul').toggleClass("visible");
    });
});
</script>
</html>
相关问题
最新问题