3
Ich bin ein Anfänger, wenn es um HTML und CSS geht, muss ich eine Website als Schulprojekt machen. Ich möchte die Suchleiste in der Navigationsleiste mit CSS hinzufügen, ich habe gesucht, aber ich konnte die Antwort nicht finden. Hier ist mein Code:Setzen der Suchleiste in der NavBar
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
<a href="#">Story</a>
<ul>
<li><a href="#">Child of Prophecy</a>
</li>
<li>
<a href="#">The Wild Hunt</a>
</li>
<li>
<a href="#">Romance</a>
</li>
<li>
<a href="#">Choice & Consequence</a>
</li>
</ul>
</li>
<li>
<a href="#">Regions</a>
<ul>
<li><a href="#">White Orchard</a>
</li>
<li>
<a href="#">Velen-No Man's Land</a>
</li>
<li>
<a href="#">Novigrad</a>
</li>
<li>
<a href="#">Royal Palace in Vizima</a>
</li>
<li>
<a href="#">The Skellige Isles</a>
</li>
<li>
<a href="#">Kaer Morhen</a>
</li>
</ul>
</li>
<li>
<a href="#">Bestiary</a>
<ul>
<li><a href="#">Beasts</a>
</li>
<li>
<a href="#">Cursed Ones</a>
</li>
<li>
<a href="#">Draconians</a>
</li>
<li>
<a href="#">Elementals</a>
</li>
<li>
<a href="#">Hybrids</a>
</li>
<li>
<a href="#">Insectoids</a>
</li>
<li>
<a href="#">Necrophages</a>
</li>
<li>
<a href="#">Ogroids</a>
</li>
<li>
<a href="#">Relicts</a>
</li>
<li>
<a href="#">Specters</a>
</li>
<li>
<a href="#">Vampires</a>
</li>
</ul>
</li>
<li>
<a href="#">Monster Hunts</a>
</li>
<li>
<a href="#">DLC's</a>
<ul>
<li><a href="#">Heaarts of Stone</a>
</li>
<li>
<a href="#">Blood and Wine</a>
</li>
</ul>
</li>
<li>
<a href="#">CD Projekt Red</a>
</li>
</ul>
<div>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
, was Sie genau tun Willst du es in die Navbar (mit schwarzem Hintergrund) setzen? – ab29007
Bassistisch möchte ich die Suchleiste in der gleichen Zeile mit der NavBar –
Vielen Dank für die Bearbeitung! –