C
C
Chokatillo2015-11-04 20:50:21
css
Chokatillo, 2015-11-04 20:50:21

Rolling out search form, style.css task snag?

I can’t create a menu search form in style, the task of correctly responding to a mouse click: cg91812-wordpress-3.tw1.ru
You only need to open the search when you click on the orange square, and after clicking, before entering text, keep the form style open, and when you move the mouse away line the dog is hiding again
Tortured style.. I don’t understand where the conflict is:

/* MENU SEARSH */
.menu-item-search {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: .71;
  -moz-transition: width 180ms;
  -o-transition: width 180ms;
  -webkit-transition: width 180ms;
  transition: width 180ms;}

@media screen and (max-width: 892px) {
.menu-item-search {
    display: none;}}
.menu-item-search:hover {
    width: 626px;
    opacity: 1;}

.my-wp-search {
    width: 50px;
    height: 50px;}

#s {
background :#d3d6c3;
color: #f0522b;
height: 50px;
width: 626px;
border: 6px solid #f0522b;}

#s:focus {
background :#fff;
width: 100%;
opacity: 1;}

#searchsubmit {
cursor: pointer;
width: 50px;
height: 50px;
margin: 0 0 0 -50px;
background: #f0522b;
font-style: normal;
font-size:16px;}

.menu-header li:last-child{padding:0px 0px;}
.menu-header li:last-child:hover{padding:0px 0px;}
.menu-header li:nth-last-child(2) {margin-right: 53px!important;}
.menu-item-search {position: absolute!important; top: 0; right: 0;}
/* MENU SEARSH */

via function.php:
// menu-search-form.
function add_search_to_wp_menu ( $items, $args ) {
 if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text" type="text" value="Поиск по сайту" name="s" id="s" onfocus="if (this.value == \'Поиск по сайту\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Поиск по сайту\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="+"/></p></form>';
$items .= '</li>';
 }
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question