it-swarm.com.de

Erstellen Sie ein Suchformular im Menü wie im Thema Vierundzwanzig

Ich möchte das Suchformular im Menü von Twenty Fourteen wiederholen. Ich habe versucht, die Suchschaltfläche mit jQuery auszublenden und anzuzeigen. Mein Problem ist, dass die Schaltfläche nicht von links nach rechts und von rechts nach links gleitet, sondern nur "erscheint" und "verschwindet". Wenn jemand einen Blick darauf werfen könnte, wäre es großartig! Dies ist mein HTML-Code

                  <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>

und das ist mein einfacher jQuery-Code

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();
});

});

1
HannesH

. animate () ist die jQuery-Funktion, die Sie sich ansehen möchten. Sehr praktisch.

Hier ist ein funktionierendes Beispiel für Ihre spezielle Frage:

http://jsfiddle.net/B8Yv9/

Und eine komplette HTML-Aufarbeitung:

<!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