Question

我有一个完美的桌面视图菜单，当鼠标悬停时，.gif图像将叠加。当设备宽度低于768px时，菜单响应正在工作，但是图像覆盖有问题，其中显示所有图像而不是默认的菜单视图。

请参阅此链接以查看设计http://testing.x-renaissance.com/

网页设计使用HTML + Bootstrap

CSS

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #000;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  text-align: center;
}
.overlay img { height: 50px; }
.nav-menu li:hover .overlay { bottom: 0; height: 100%; }

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="Menu1" href="#" title="">
                LOGO
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav nav-menu">
                <li class="">
                    <a href="#" class="" title="Menu1">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu1
                    </a>
                </li>
                <li>
                    <a href="#" class="h" title="Menu2">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu2
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Menu3">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu3
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu4">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu4
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu5">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu5
                    </a>
                </li>
                <li>
                    <a href="#" class="" title="Menu6">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu6
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>

Answer 1

这是因为您依赖于基于高度的隐藏，但当它变成折叠菜单时，它不再具有该选项。我创建了一个媒体查询，根据折叠时的位置隐藏它。 https://codepen.io/anon/pen/KqYgLX?editors=1010

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Testing</title>

<link href="./assets/default/css/header-slider.css" rel="stylesheet"/>
<link href="./assets/default/css/custom.css" rel="stylesheet"/>
<link href="./assets/plugin/Hover-master/css/hover.css" rel="stylesheet" media="all">
<link href="./assets/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- bootstrap link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end of bootstrap link -->

</head>
<body><style type="text/css">
    .overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #000;
      overflow: hidden;
      width: 100%;
      height: 100%;
      transition: .5s ease;
      text-align: center;
    }
    .overlay img { height: 50px; }
    .nav-menu li:hover .overlay { bottom: 0; height: 100%; }
    .navbar-inverse .navbar-nav>.active>a>.overlay { bottom: 0; height: 100%; }
    @media screen and (max-width: 768px) {
      .overlay {
          bottom: 0 !important;
          left: 100% !important;
          background-color: red !important;
      }
      .nav-menu li:hover .overlay { left: 0 !important; height: 100%; }
    }
</style>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
            <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="Menu1" href="#" title="">
                LOGO
            </a>
        </div>
        
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav nav-menu">
                <li class="">
                	<a href="#" class="" title="Menu1">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                        Menu1
					</a>
                </li>
                <li>
                	<a href="#" class="h" title="Menu2">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                		Menu2
                	</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Menu3">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                    	Menu3
                    </a>
                </li>
                <li>
                	<a href="#" class="" title="Menu4">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                		Menu4
                	</a>
                </li>
                <li>
                	<a href="#" class="" title="Menu5">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                		Menu5
                	</a>
                </li>
                <li>
                	<a href="#" class="" title="Menu6">
                        <div class="overlay">
                            <img src="http://pa1.narvii.com/6050/e0e8fcb7950ad0fd900775fdde8e538ee00b88f8_hq.gif">
                        </div>
                		Menu6
                	</a>
                </li>
            </ul>
		</div>

    </div>
</div>

＆＃13;

菜单以html响应

1 个答案: