CODEWITHSUNDEEP
jquerycsssearch
Evan
Evan

Reputation: 3511

Apple.com's Search Stick that grows when clicked?

Would someone be able to point in the right direction for a "similar" jquery plug-in, for example, that could replicate apple's new search stick functionality?

When using Safari or Chrome, the search stick located in apple's global navigation will increase in size when clicked. I'd like to incorporate this same effect for a project of mine.

Link: http://www.apple.com/about/webbadges/

I appreciate your help!

Evan

Upvotes: 1

Views: 1340

Answers (2)

generalhenry
generalhenry

Reputation: 17319

animating the list of links should be easy as well

ul#menu {
display: table;
width: 500px;
}
ul#menu li {
display: table-cell;
}

<ul id=menu>
  <li>link1</li>
  <li>link2</li>
  <li>link3</li>
</ul>

$('#menu').animate({width:'-=100'},1000); //make them slimmer
$('#menu').animate({width:'+=100'},1000); //make them fatter

Upvotes: 1

Mark Eirich
Mark Eirich

Reputation: 10114

I'd say just write it yourself! It isn't as hard as you might think. This might help get you started:

<html><body>

<style>
#search {
    background-color: #999;
    width: 100px;
    border: 1px solid #ddd;
    outline: none;
}
</style>

<input id="search" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
jQuery(function() {
    jQuery('#search').focus(function() {
        jQuery(this).animate({ width: '200px', backgroundColor: '#fff' });
    }).blur(function() {
        jQuery(this).animate({ width: '100px', backgroundColor: '#999' });
    });
});
</script>

</body></html>

Upvotes: 6

Related Questions