web-dev-qa-db-fra.com

Créer un formulaire de recherche dans le menu comme dans le thème Twenty Fourteen

Je voudrais reproduire le formulaire de recherche dans le menu de Twenty Fourteen. J'ai essayé de cacher et d'afficher le bouton de recherche avec jQuery. Mon problème est que le bouton ne glisse pas de gauche à droite et de droite à gauche, il "apparaît" et "disparaît". Si quelqu'un pouvait jeter un coup d'œil, ce serait génial! Ceci est mon code HTML

                  <div class="search">
                    <form class="form-inline" id="forminline"role="form">
                        <div class="input-group">
                             <span class="input-group-btn" id="btn-search">
                                <div class="btn btn-search"><i class="fa fa-search search-ico"></i></div>
                            </span>
                            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
                            <input style="display: none;" type="search" class="form-control form-search" id="box-search" placeholder="<?php echo esc_attr_x( 'Sök på hemsidan &hellip;', 'placeholder', 'lagnogruppen' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">  
                        </div><!-- /input-group -->
                </form>
              </div>

et ceci est mon code jQuery simple

jQuery(document).ready( function(){

jQuery('#btn-search').click( function(event){
    event.stopPropagation();
    jQuery('#box-search').toggle();
});

jQuery('#box-search').click(function(event){
    event.stopPropagation();
            });

jQuery(document).click( function(){
    jQuery('#box-search').hide();
});

});

menusthemesjquerysearchtheme-twenty-fourteen
1
HannesH

. animate () est la fonction jQuery que vous souhaitez examiner. Très utile.

Voici un exemple de travail pour votre question particulière:

http://jsfiddle.net/B8Yv9/

Et un bilan complet en HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<style>
.search { width:300px; }

.input-group { position:relative; float:right; }

#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }

input { width:0; padding-left:20px; border:1px solid transparent; }
</style>
</head>

<body>

<div class="search">
    <form class="form-inline" id="forminline"role="form">
        <div class="input-group">
            <span class="input-group-btn" id="btn-search">
                <div class="btn btn-search"><i class="fa fa-search search-ico">S</i></div>
            </span>
            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
            <input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
        </div>
    </form>
</div>

<script>
$('#btn-search').click(function(){
    $('input').css('border-color', '#aaa').animate({
        'width' : 200
    }, 300).focus().queue(function(){
            $(this).addClass('toggled'); 
            $(this).dequeue();
        });
});

$('input').hover(
  function() {
    $(this).removeClass('unhovered');
  }, function() {
    $(this).addClass('unhovered');
  }
);

$(document).click(function(){
    if($('input').hasClass('toggled') && $('input').hasClass('unhovered')) {
        $('input').animate({
                'width' : 0
        }, 300).css('border-color', 'transparent').queue(function(){
            $(this).removeClass('toggled'); 
            $(this).dequeue();
        });;  
    }
});
</script>
</body>
</html>
2
deflime