Submit your widget

resizing menu bar with jQuery

Created 4 years ago   Views 28690   downloads 4322    Author webdesignerdepot
resizing menu bar with jQuery
View DemoDownload 49.8 KB
73
Share |

we'll started featuring a dynamic and animated menu that resizes on scroll down. Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery. 

This kind of menu is great if you want to give special focus on your content throughout the whole website, and it also enables you to create a bigger and more impactful navigation on a user’s first visit to a website. You can better show your website brand or logo, great for the above the fold view; and after engaging the user in a visit, a smaller and minimized version hides away subtly to let the user focus mainly on your content.

There are several ways of doing this. In this tutorial, I’ll explain how to create a full width fixed menu bar, that resizes in height along with the logo, creating a simple minimized version of the initial one. If you prefer you can also replace the logo image by another variation of your logo, such as initials or an icon, but keep in mind that consistency is really important here, so that the user understands how the element has changed and that its main purpose is still the original one; navigating the website.

We’ll start by creating the basic HTML code we’ll need. We’ll be sticking to a really simple HTML5 structure for the starting point. 
<!DOCTYPE HTML><html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>How to create a dynamic top bar | Webdesigner Depot</title>
  </head><body>
</body></html> 

Now that our initial HTML code is done, we’ll add the code for the menu as well as some other details on the head of our HTML file. 

<!DOCTYPE HTML> <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="author" content="Antonio Pratas">
    <title>How to create a resizing menu bar | Webdesigner Depot</title>
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head><body>
    <header class=“large”>
    <nav><img class=“logo” src="wdd.png"/>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Posts</a></li>
      <li><a href="#">Awesome Freebies</a></li>
    </ul> </nav>
    </header>
    <section>
      <p>Let's get that menu small!</p>
      <p>End of the line.</p>
    </section>
  </body>
</html> 

Read more:http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/

Tag: menu