个人中心
gpt4 book ai didi

html - 我的搜索栏如何全宽并隐藏其他元素

转载 作者：行者123 更新时间：2023-11-28 02:12:45 24 4
gpt4 key购买 nike

我有导航菜单，您可以查看该片段。 (在这种情况下它没有响应)。我的问题是我想让搜索栏(悬停在页面 max-width980px 上)隐藏所有元素并在导航菜单中全宽。问题是我对 javascript 的理解很差，所以是否有任何仅 css 的解决方案。我尝试添加 z-index 但没有效果。

/* Navigation menu */


.resmenu {
    display: none;
    cursor: pointer;
}
.resmenuitems {
        display: none;
}
.navmenu {
    width: 100%;
    height: 55px;
    border-bottom: 1px solid rgb(240,240,240);
}

.logo {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
    font-size: 1.5em;
    font-weight: bold;
    float: left;
    margin-left: 3%;
    padding: 10px 0px 10px 0px;
    
}


.navlinksr {
    float: right;
    margin-right: 2%;
    width: 490px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:space-around;
}

.navlinksr a {
    float: right;
    text-decoration: none;
    color: black;
    font-size: 0.95em;
    font-family: 'Roboto', sans-serif; 
    font-weight: bold;
    
}




.navlinksline {
    height: 40%;
    width: 1px;
    background-color: grey;
}

.logodif {
    background-color: black;
    color: white;
    padding: 7px;
    border-radius: 3px;
}

.rlynothing {
    margin-left: 4%;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rlynothingagain {
    height: 40%;
    width: 1px;
    background-color: grey;
}



/* SEARCH */

.swrap{
    height: 100%;
    float:left;
    margin: auto;
    display: flex;
    align-items: center;
    margin-left: 30px;
}


.search-container { 
    float:left;
  display: flex;
  width: 30px;
  padding: 8px;
  transition: width .2s;
  overflow: hidden;
}

.search-container:hover{
    width: 200px;
    border: 2px solid black;
    border-radius: 2px;
}


.search-input {
  flex: 1;
  display: flex;
}

.search-input input {
  flex: 1;
  background-clip: padding-box;
  border: 0;
  padding: 0;
  outline: 0;
  margin-left: 4px;
}

.navlinkborder {
    background-color: limegreen;
    padding: 10px;
    border-radius: 3px;
}

.navlinkborder:hover {
    background-color: green;
    color: white;
    transition: .5s;
}
<!DOCTYPE html>

<html lang="sk">
    
<head>

    <!-- Site info -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- CSS -->
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/bootstrap-grid.css">
    <link rel="stylesheet" href="styles/style.css">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
    

</head>
    
<body>

    <!-- BEGIN - Header -->
    <div class="navmenu">
    <a href="index.php">   
    <div class="logo">
    <p>Coding</p>&nbsp;<p class="logodif">Hub</p>
    </div>
    </a> 
        
    <div class="rlynothing">
        <div class="rlynothingagain">
        </div>
    </div>
        
     <div class="swrap">
	<div class="search-container">
  <div class="search-icon-btn">
    <i class="fa fa-search fa-lg"></i>
  </div>
  <div class="search-input">
    <input type="search" class="search-bar" placeholder="Hľadať...">
  </div>
</div>
         </div> 

    
	  <div class="resmenu" id="flip">
      <i class="fas fa-bars fa-2x"></i>  
    </div>
          
    <div class="navlinksr">
        <a href="archiv.php">Archív</a>
        <a href="#">Live</a>
        <a href="donate.php" class="navlinkborder" style="color: white">PODPORIŤ</a>
        <a href="kontakt.php">Kontakt</a> 
        <a class="navlinksline"></a>
        <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
        
  
        
          
    </div>
   
    <div id="panel" class="resmenuitems">
    <a href="archiv.php">Archív</a>
    <a href="donate.php">PODPORIŤ</a>
    <a href="archiv.php">Live</a>
    <a href="kontakt.php">Kontakt</a>
    <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
    <!-- END - HEADER -->

最佳答案

试试下面
将标题设置为固定

.logo {
    margin-left: 30px;
}

.rlynothing {
    margin-left: 40px;
}

设置搜索容器全宽

.search-container { 
    float:left;
    display: flex;
    width: 30px;
    padding: 8px;
    overflow: hidden;

    position: absolute;
    z-index: 1;
    border: 2px solid white;
    border-radius: 2px;
    transition: all .2s;
}

.search-container:hover{    
    background: white;
    width: calc(100% - 264px); /* 264px is the width of Header Image */
    border-color: black;
}

您可以使用 calc() 计算搜索栏的宽度。
要在其他元素上方显示搜索栏，请使用 position: absolute(relative) 和 z-index。
要使 z-index 起作用，您需要使用 position : absolute 或 position : relative

/* Navigation menu */


.resmenu {
    display: none;
    cursor: pointer;
}
.resmenuitems {
        display: none;
}
.navmenu {
    width: 100%;
    height: 55px;
    border-bottom: 1px solid rgb(240,240,240);
}

.logo {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100%;
    font-size: 1.5em;
    font-weight: bold;
    float: left;
    margin-left: 30px;
    padding: 10px 0px 10px 0px;
    
}


.navlinksr {
    float: right;
    margin-right: 2%;
    width: 490px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:space-around;
}

.navlinksr a {
    float: right;
    text-decoration: none;
    color: black;
    font-size: 0.95em;
    font-family: 'Roboto', sans-serif; 
    font-weight: bold;
    
}




.navlinksline {
    height: 40%;
    width: 1px;
    background-color: grey;
}

.logodif {
    background-color: black;
    color: white;
    padding: 7px;
    border-radius: 3px;
}

.rlynothing {
    margin-left: 40px;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rlynothingagain {
    height: 40%;
    width: 1px;
    background-color: grey;
}



/* SEARCH */

.swrap{
    height: 100%;
    float:left;
    margin: auto;
    display: flex;
    align-items: center;
    margin-left: 30px;
}


.search-container { 
    float:left;
    display: flex;
    width: 30px;
    padding: 8px;
    overflow: hidden;

    position: absolute;
    z-index: 1;
    border: 2px solid white;
    border-radius: 2px;
    transition: all .2s;
}

.search-container:hover{
    background: white;
    width: calc(100% - 264px); /* 264px is the width of Header Image */
    border-color: black;
}


.search-input {
  flex: 1;
  display: flex;
}

.search-input input {
  flex: 1;
  background-clip: padding-box;
  border: 0;
  padding: 0;
  outline: 0;
  margin-left: 4px;
}

.navlinkborder {
    background-color: limegreen;
    padding: 10px;
    border-radius: 3px;
}

.navlinkborder:hover {
    background-color: green;
    color: white;
    transition: .5s;
}
<!DOCTYPE html>

<html lang="sk">
    
<head>

    <!-- Site info -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- CSS -->
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/bootstrap-grid.css">
    <link rel="stylesheet" href="styles/style.css">
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
    

</head>
    
<body>

    <!-- BEGIN - Header -->
    <div class="navmenu">
    <a href="index.php">   
    <div class="logo">
    <p>Coding</p>&nbsp;<p class="logodif">Hub</p>
    </div>
    </a> 
        
    <div class="rlynothing">
        <div class="rlynothingagain">
        </div>
    </div>
        
     <div class="swrap">
	<div class="search-container">
  <div class="search-icon-btn">
    <i class="fa fa-search fa-lg"></i>
  </div>
  <div class="search-input">
    <input type="search" class="search-bar" placeholder="Hľadať...">
  </div>
</div>
         </div> 

    
	  <div class="resmenu" id="flip">
      <i class="fas fa-bars fa-2x"></i>  
    </div>
          
    <div class="navlinksr">
        <a href="archiv.php">Archív</a>
        <a href="#">Live</a>
        <a href="donate.php" class="navlinkborder" style="color: white">PODPORIŤ</a>
        <a href="kontakt.php">Kontakt</a> 
        <a class="navlinksline"></a>
        <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
        
  
        
          
    </div>
   
    <div id="panel" class="resmenuitems">
    <a href="archiv.php">Archív</a>
    <a href="donate.php">PODPORIŤ</a>
    <a href="archiv.php">Live</a>
    <a href="kontakt.php">Kontakt</a>
    <a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
    </div>
    <!-- END - HEADER -->

关于html - 我的搜索栏如何全宽并隐藏其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48660243/

24 4 0
文章推荐： html - Wordpress:更改特定 ul 的元素符号颜色(不是文本)
文章推荐： C++: 错误 C4700 使用了未初始化的局部变量 ""
文章推荐： JavaScript WebSocket 尝试打开...然后关闭，没有错误
文章推荐： c++ - 使用 C++ 代码的小型计算器
行者123
个人简介

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

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