Move Search box to the right of menu bar

Question

takeover4444 0 Newbie Poster

13 Years Ago

Hi all, I'm trying to create a search box that is located in the far right of the menu bar, and i want to remove the hover effect of the search box.
Sorry for my bad english, to know what i mean, you can see the picture below :D

821e1bf8483f2e5119bc7dfa7313aa72

Myblog: Click Here

** menu bar: HTML**

<ul id="nav">
    <li><a href=" http://thegioidulieu.blogspot.com/">Trang chủ</a></li>
     <li><a href=" http://thegioidulieu.blogspot.com/search/label/Game?&max-results=10">Game</a></li>
   <li><a href=" http://thegioidulieu.blogspot.com/search/label/Phim?&max-results=10">Phim</a></li>
    <li><a href=" http://thegioidulieu.blogspot.com/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m?&max-results=10">Phần mềm</a></li>
    <li><a href=" http://thegioidulieu.blogspot.com/search/label/Truy%E1%BB%87n?&max-results=10">Truyện</a></li>
    <li><a href="http://thegioidulieu.blogspot.com/search/label/%E1%BA%A2nh%20%C4%91%E1%BA%B9p?&max-results=10">Ảnh Đẹp</a></li>
    <li><a class="hsubs" href=" http://thegioidulieu.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt?&max-results=10">Thủ thuật »</a>

        <ul class="subs">
            <li><a href="http://thegioidulieu.blogspot.com/search/label/Windows?&max-results=10">Windows</a></li>
            <li><a href="http://thegioidulieu.blogspot.com/search/label/Hack-CSO?&max-results=10">Hack CSO</a></li>
        </ul>
    </li>


<li class=”last-nav-list-item nav-list-item”>
<div>
<form id="search-blog" method="get" action="/search">
            <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
           <input type="image" src="" id="sbutton" />
</form>
</div>

</li></ul>

** menu bar: CSS**

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background: url('background.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 50px;
    padding: 0 0 0 9px;
    position: relative;
    width: 1100px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
padding-top: 2px;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: bold;
    height: 32px;
    padding: 15px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 2px 2px 2px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 48px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}

Thanks you in advance :D

html-css user-interface web-design

Edited 13 Years Ago by takeover4444

4 Contributors
5 Replies
824 Views
1 Hour Discussion Span
Latest Post 13 Years Ago Latest Post by takeover4444

Dani AI

Generated 10 Months Ago

Agree with and : the cleanest solution is to take the search form out of the UL so it can be positioned independently of the list. correctly pointed out the malformed quote characters in the OP markup; fixing those makes the HTML valid and avoids weird selector behavior. Two practical, modern approaches follow.

Use flexbox for a robust, responsive layout. Put the UL and the search container as siblings inside the nav, then let the search container push itself to the right with auto margin. This keeps the menu items in document order (better for accessibility and keyboard users) and removes the need for float hacks.

Example structure (illustrative):

<nav id="nav">
  <ul class="menu"> ... </ul>
  <div class="nav-search" role="search">
    <form aria-label="Site search">
      <label class="sr-only" for="q">Search</label>
      <input id="q" name="q" placeholder="Search..." />
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

Minimal CSS idea (illustrative):

#nav { display:flex; align-items:center; }
.menu { display:flex; list-style:none; margin:0; padding:0; }
.nav-search { margin-left:auto; }

If it is necessary to keep the form inside an LI, add a specific class on that LI (for example no-hover) and override the nav hover rules for that item only, rather than disabling hover globally. When overriding, prefer higher-specificity selectors before using !important. Replace the old value+onfocus JS placeholder technique with the HTML5 placeholder attribute, and keep a visible focus outline or a clear keyboard focus style for accessibility.

All 5 Replies

JorgeM 958 Problem Solver

13 Years Ago

I would recommend you remove the input element outside if the unordered list. You can the. Move it to the right using float, or other methods such as by using the position, top, right properties.

TonyG_cyprus 36 Newbie Poster

13 Years Ago

I have trouble understanding your markup.
you have this

<li class=”last-nav-list-item nav-list-item”>

which makes no sense, probably a typo, and you have no class in your css, only ID's.

Take the form out of the ul and put it in its own div
<div class="search"><form etc...></div>

and put in your css

.search{position:relative;float:right;}

and we'll see where we go from there.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

IIM 163 Master Poster · Answer 1 · 2013-04-27T17:04:42+00:00

I too will recommend the same suggestion. Instead of adding search element in li, create search in another element and then right float element to site right

TonyG_cyprus 36 Newbie Poster · Answer 2 · 2013-04-27T17:04:43+00:00

Also

 -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;

This lot don't seem to be doing anything, with zero's as params, it's just cluttering and confusing. I'd get rid of it.

takeover4444 0 Newbie Poster · Answer 3 · 2013-04-27T17:25:34+00:00

takeover4444 0 Newbie Poster

13 Years Ago

Thanks all. I'll try it

Edited 13 Years Ago by takeover4444

Move Search box to the right of menu bar

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers