How to set search box in the menu?

Question

How to set search box in the menu?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I wanted to know how to set the search box in the menu !!

The designe of the menu with the box:

My code:

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 88%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}

/*-----------Config. da caixa de pesquisa------------*/

.search{
	width:130px;
	height:33px;
	top:-2px;
	right:-2px;
	outline:none;
	border:none;
	background:#222;
	color:#FFF;
	position:relative;	
	font-size:16px;
}

.btn-busca{
	width:33px;
	height:35px;
	outline:none;
	border:none;
	background:#FF7F00;
	cursor:pointer;
	top:2px;
	left:-4px;
	position:relative;
}

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
        </ul>
    </div>
    
 </div> 

<form class="searchbox" action="busca.html" method="get">
    <input class="search" type="text" placeholder="Buscar...">
    <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
</form>

html css

asked by anonymous 23.10.2015 / 01:24

2 answers

1

The elements div and form have the CSS property display: block by default of the browser.

Following is a definição of this property:

The block element always starts on a new line and expands to the left and right as much as possible

However, there are several ways to get the elements side by side.

1. float: left

Here is an example of the float property with value left ( you can also use right to right):

div {
  float: left;
  border: 1px solid #000;
}

<div>elemento 1</div>
<div>elemento 2</div>

2. display: inline-block

Here is an example using the display property with value inline-block :

div {
  display: inline-block;
  border: 1px solid #000;
}

<div>elemento 1</div>
<div>elemento 2</div>

3. display: flex

This option deserves a thorough study. It is a novelty of CSS3 with a huge potential for organization of elements. I recommend reading the following material for more learning: A Complete Guide to Flexbox

.wrapper {
  display: flex;
}
.wrapper div {
  border: 1px solid #000;
}

<div class="wrapper">
  <div>elemento 1</div>
  <div>elemento 2</div>
</div>

23.10.2015 / 03:04

What is the correct way to call a method from a class that inherits from an activity? Undefined Index with Oracle connection

score 1 · Accepted Answer

In your case, you could simply place your form inside a li and align it to the right.

For this you can create a class and right align, like this:

li.right { float:right; }

Once you've done this, just add your search within li , like this:

 <li class="right">              
     <form class="searchbox" action="busca.html" method="get">
         <input class="search" type="text" placeholder="Buscar...">
         <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
     </form>
 </li>

Your complete code looks like this:

.nav{
    width:100%;
    height:42px;
	background-color:#4682B4;    
	font-family:arial;
	font-size:1.000em;
	color:#fff;
    float:left;
}

.menu{
	margin: 0 auto;
    width: 88%;
	margin-left:11.23046875%;
    text-align: left;
}

.nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position:relative;
    min-width: 200px;
	z-index:99;
}

.nav ul li{
    display: inline-block;
}

.nav ul li:hover{
    background-color: #000;
}

.nav ul li a, visited{
    color: #fff;
    display: block;
    padding: 0.813em;
    text-decoration: none;
}

.nav ul li:hover ul{
    display: block;
}

.nav ul ul {
    display:none;
    position:absolute;
	background-color: #222;
}

.nav ul ul li {
    display: block;
}

.nav ul ul li a:hover{
    color: #fff;
}

.img-menu{
	display:none;	
}

/*-----------Config. da caixa de pesquisa------------*/

.search{
	width:130px;
	height:33px;
	top:-2px;
	right:-2px;
	outline:none;
	border:none;
	background:#222;
	color:#FFF;
	position:relative;	
	font-size:16px;
}

.btn-busca{
	width:33px;
	height:35px;
	outline:none;
	border:none;
	background:#FF7F00;
	cursor:pointer;
	top:2px;
	left:-4px;
	position:relative;
}
li.right { float:right; }

<div class="nav">
 <div class="img-menu"><img src="img/icn-menu.png"/></div>
    <div class="menu">
        <ul>
            <li><a href="Index.html">Home</a>
            </li>
                <li> <a href="#">Games</a>
                <ul>
                    <li><a href="#">Gameplays</a>
                    </li>
                    <li><a href="#">Reviews</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                    <li><a href="#">Trailers</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Downloads</a>
                <ul>
                    <li><a href="#">Games</a>
                    </li>
                    <li><a href="#">Editor de Imagens</a>
                    </li>
                    <li><a href="#">Editor de Áudio e Vídeo</a>
                    </li>
                    <li><a href="#">Segurança</a>
                    </li>
                    <li><a href="#">Sistemas Oprecionais</a>
                    </li>
                    <li><a href="#">Os Mais Baixados</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Mobile</a>
                <ul>
                    <li><a href="#">Android</a>
                    </li>
                    <li><a href="#">IOS</a>
                    </li>
                    <li><a href="#">Windows Phone</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
             <li> <a href="#">Internet</a>
                <ul>
                    <li><a href="#">Redes Socias</a>
                    </li>
                    <li><a href="#">Dicas</a>
                    </li>
                </ul>
            </li>
                    <li> <a href="#">Diversão</a>
                <ul>
                    <li><a href="#">Filmes</a>
                    </li>
                    <li><a href="#">Animes/desenhos</a>
                    </li>
                    <li><a href="#">Memes</a>
                    </li>
                    <li><a href="#">Histórias bisarras</a>
                    </li>
             </ul>
                <li> <a href="#">TI</a>
                <ul>
                    <li><a href="#">Progamção</a>
                    </li>
                    <li><a href="#">Tutorias</a>
                    </li>
              </ul>
            </li>
                        <li class="right">
                            
<form class="searchbox" action="busca.html" method="get">
    <input class="search" type="text" placeholder="Buscar...">
    <button class="btn-busca"><img src="img/tb-lupa.png"/></button>
</form>
    </li>
        </ul>
    </div>
    
 </div>

See a Full Screen Example