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

标签 html css searchbar

我有导航菜单，您可以查看该片段。 (在这种情况下它没有响应)。我的问题是我想让搜索栏(悬停在页面 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/

上一篇：html - 在 CSS 中为背景图像添加边距

下一篇：html - Wordpress:更改特定 ul 的元素符号颜色(不是文本)

相关文章：

html - Angular 2 - 子组件不从父组件继承样式

javascript - 将网页的 CSS 转换为用于 react-native-render-html 的 javascript npm 包

IOS Searchbar 返回错误数据

android - 如何在钛合金的ListView中仅根据单词的第一个字母进行过滤来搜索？

html - css 裁剪图像然后按百分比缩放

javascript - 如何使用 jQuery 删除 div 中的多个文本？

javascript - 当单元格相同时制作行跨度

html - 如何使用 2 个输入在不按下元素的情况下使搜索栏可裁剪

javascript - 鼠标单击时文本输入更改类

javascript - 使用 Jquery 下拉设置初始化值

©2024 IT工具网  联系我们