KrishnaVandanu

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="post-18189 post type-post status-publish format-standard hentry category-tutorials tag-css3 tag-jquery tag-menus tag-navigation tag-tutorial" id="post-18189"><br /><div style="text-align: justify;"><br /><a class="aligncenter" href="http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Create Stay-On-Top Nagging Menu with CSS3 and jQuery" class="alignleft size-full wp-image-18286" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Picture-70.png" title="css3-jquery-nagging-menu" width="150" /></a>In the project I was working on recently I had a chance to experiment with CSS3 and jQuery. You know CSS3, right? It’s that thing that makes all those beautiful and amazing things on the web and makes Flash want to run away and hide. Yeah, that CSS3. And I’m more than sure you have heard about jQuery. If you haven’t, well, it’s a kind of library where you cannot borrow any books, but it allows you to do other stuff and bring some additional magic to the web.<br />Anyways, I ended up mixing those two which resulted in this cool effect. I found it really useful and hope you will too, as you can use in on almost every website that has some sort of menu – and let’s face it, most do.</div><br />The video below will show you what you’ll be making and how to do that. Unfortunately, since I had only 5 minutes for this, I focused only on the jQuery part. Everything else you need for this you will find in the tutorial below. You can also hit the “<a href="http://dl.dropbox.com/u/1715120/demos/create-stay-on-top-nagging-menu-with-css3-and-jquery/index.html">Live Demo</a>” button to see the final effect yourself.<br /><br /><b>NOTE</b>: <span style="color: red;"><i>To fully enjoy all of this extravaganza, you need to see it in a browser based on WebKit engine – <a href="http://www.apple.com/safari/">Safari</a> and <a href="http://www.google.com/chrome">Chrome</a> being the best ones. Current version of <a href="http://www.mozilla.com/firefox/">Firefox</a> doesn’t fully support it, not to mention <a href="http://opera.com/">Opera</a>, or <a href="http://www.microsoft.com/windows/internet-explorer">IE</a>. </i></span><br /><br /><div><br /><a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery/index.html" target="_blank"><img alt="Check out Live Demo for Create Stay-On-Top Nagging Menu with CSS3 and jQuery" height="50" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1stwd-live-demo-button.png" width="570" /></a></div><br /><div><br /><a class="aligncenter" href="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/nagging-menu-with-css3-and-jquery.zip"><img alt="Check out Live Demo for Create Stay-On-Top Nagging Menu with CSS3 and jQuery" height="50" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1stwd-download-button.png" width="570" /></a></div><br /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="345" width="560"><param name="flashvars" value="i=81531"><param name="allowFullScreen" value="true"><param name="src" value="http://screenr.com/Content/assets/screenr_1116090935.swf"><param name="allowfullscreen" value="true"><embed type="application/x-shockwave-flash" src="http://screenr.com/Content/assets/screenr_1116090935.swf" allowfullscreen="true" flashvars="i=81531" height="345" width="560"></object><br /><br /><h2><br />Table of Contents</h2><br /><ol><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part1">What’s Needed</a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part2">All the HTML Stuff</a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part3">Importing jQuery and Nagging Menu Script</a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part4">Let’s Make a CSS Soup</a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5">CSS3 Extravaganza</a><br /><ul><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5.1">Spicing Up <code>#menu</code></a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5.2">Spicing Up <code>ul li a</code></a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5.3">Spicing Up <code>ul li a:hover</code></a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5.4">Spicing Up <code>.default</code></a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part5.5">Spicing Up <code>.fixed</code></a></li><br /></ul><br /></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part6">jQuery Magic</a></li><br /><li><a href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#part7">After Word</a></li><br /></ol><br /><h2 id="part1"><br />What’s Needed</h2><br />Just four things and we’re good to go:<br /><br /><ul><br /><li>index.html</li><br /><li>style.css</li><br /><li>nagging-menu.js</li><br /><li>you</li><br /></ul><br />HTML markup will be just copy-and-paste thing, as it’s not really important here. Instead, we will dig little deeper into CSS3 and jQuery.<br /><br /><h2 id="part2"><br />All the HTML Stuff</h2><br />Create <i>index.html</i> and paste all of this in:<br /><br /><div class="syntaxhighlighter  " id="highlighter_642076"><br /><div class="bar       "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_642076" height="16" id="highlighter_642076_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain"><</code><code class="keyword">html</code> <code class="color1">xmlns</code><code class="plain">=</code><code class="string">"<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain"><</code><code class="keyword">head</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="plain"><</code><code class="keyword">title</code><code class="plain">>Create Stay-On-Top Nagging Menu with CSS3 and jQuery</</code><code class="keyword">title</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="plain"><</code><code class="keyword">meta</code> <code class="color1">http-equiv</code><code class="plain">=</code><code class="string">"Content-Type"</code> <code class="color1">content</code><code class="plain">=</code><code class="string">"text/html; charset=utf-8"</code> <code class="plain">/></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="plain"><</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"style.css"</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text/css"</code> <code class="color1">media</code><code class="plain">=</code><code class="string">"screen"</code> <code class="plain">/></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"><code class="plain"></</code><code class="keyword">head</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="plain"><</code><code class="keyword">body</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>9</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"header"</code><code class="plain">></</code><code class="keyword">div</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>10</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>11</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"navi"</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"menu"</code> <code class="color1">class</code><code class="plain">=</code><code class="string">"default"</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">        </code><code class="plain"><</code><code class="keyword">ul</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Home</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>CSS</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Design</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Development</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Freebies</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Inspiration</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Resources</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>Tutorials</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>22</code></td><td class="content"><code class="spaces">            </code><code class="plain"><</code><code class="keyword">li</code><code class="plain">><</code><code class="keyword">a</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"#"</code><code class="plain">>WordPress</</code><code class="keyword">a</code><code class="plain">></</code><code class="keyword">li</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>23</code></td><td class="content"><code class="spaces">        </code><code class="plain"></</code><code class="keyword">ul</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code><code class="comments"></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>25</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code><code class="comments"></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>26</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>27</code></td><td class="content"><code class="plain"><</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"content"</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">    </code><code class="plain">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>31</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">    </code><code class="plain">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>35</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>36</code></td><td class="content"><code class="spaces">    </code><code class="plain"><</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">    </code><code class="plain">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">    </code><code class="plain"></</code><code class="keyword">p</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>39</code></td><td class="content"><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code><code class="comments"></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>40</code></td><td class="content"><code class="plain"></</code><code class="keyword">body</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>41</code></td><td class="content"><code class="plain"></</code><code class="keyword">html</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Depending on your screen resolution, you will need a lot of text so…<br /><br /><b>IMPORTANT:</b> <span style="color: red;"><i>Keep adding paragraphs with “lorem ipsum” until the menu disappears from your sight entirely when you scroll down to the very bottom of the page.</i></span><br /><br /><h2 id="part3"><br />Importing jQuery and Nagging Menu Script</h2><br />In your <i>index.html</i> file, just before the closing <code></body></code> tag, paste those two lines:<br /><br /><div class="syntaxhighlighter  " id="highlighter_189572"><br /><div class="bar        "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_189572" height="16" id="highlighter_189572_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain"><</code><code class="keyword">script</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text/javascript"</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</a>"</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain"><</code><code class="keyword">script</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text/javascript"</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"nagging-menu.js"</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">></</code><code class="keyword">script</code><code class="plain">></code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Bravo ;D!<br /><br /><h2 id="part4"><br />Let’s Make a CSS Soup</h2><br />This is just the basic CSS, so create <i>style.css</i> file and paste all of this in:<br /><br /><div class="syntaxhighlighter  " id="highlighter_172277"><br /><div class="bar                           "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_172277" height="16" id="highlighter_172277_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">body {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">#efefef</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="keyword">border</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font</code><code class="plain">: </code><code class="value">normal</code> <code class="value">13px</code> <code class="color1">Verdana</code><code class="plain">, </code><code class="color1">sans-serif</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>9</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>10</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>11</code></td><td class="content"><code class="plain">#navi {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-top</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>14</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>15</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>16</code></td><td class="content"><code class="plain">#menu {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">    </code><code class="keyword">line-height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>21</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>22</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>23</code></td><td class="content"><code class="plain">#content {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>24</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">750px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-bottom</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>27</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">30px</code> <code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>29</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>30</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>31</code></td><td class="content"><code class="plain">ul {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>33</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>34</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>35</code></td><td class="content"><code class="plain">ul li {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>36</code></td><td class="content"><code class="spaces">    </code><code class="keyword">list-style-type</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>37</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">: </code><code class="value">inline</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>38</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-right</code><code class="plain">: </code><code class="value">15px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>39</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>40</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>41</code></td><td class="content"><code class="plain">ul li a {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#fff</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>44</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">3px</code> <code class="value">7px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>45</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>46</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>47</code></td><td class="content"><code class="plain">ul li a:hover {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>48</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">#01458e</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>49</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#ff0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>50</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>51</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>52</code></td><td class="content"><code class="plain">.</code><code class="value">default</code> <code class="plain">{</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">850px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>54</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>55</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>56</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>57</code></td><td class="content"><code class="plain">.</code><code class="value">fixed</code> <code class="plain">{</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>58</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">fixed</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>59</code></td><td class="content"><code class="spaces">    </code><code class="keyword">top</code><code class="plain">: </code><code class="value">-5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>60</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>61</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">100%</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>62</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />The <code>.default</code> and <code>.fixed</code> classes are very important to us. They will change the look and position of our menu; the former is responsible for how the menu looks at the beginning and for its position in the browser window, the latter is responsible for where the menu goes after we kick it out from its original position and how it looks then.<br /><br /><h2 id="part5"><br />CSS3 Extravaganza</h2><br />Now for the fun part :)! Let’s go from the top to the bottom through our CSS soupe and add some CSS3 sugar accordingly:<br /><br /><h4 id="part5.1"><br />Step 1: Spicing Up <code>#menu</code></h4><br />We’ll add a subtle gradient and rounded corners.<br /><br />The gradient for browsers based on<code>WebKit</code> engine:<br /><br /><div class="syntaxhighlighter  " id="highlighter_368156"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_368156" height="16" id="highlighter_368156_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">background</code><code class="plain">: -webkit-gradient(linear, </code><code class="value">left</code> <code class="value">top</code><code class="plain">, </code><code class="value">left</code> <code class="value">bottom</code><code class="plain">, color-stop(</code><code class="value">0%</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">), color-stop(</code><code class="value">40%</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">), color-stop(</code><code class="value">100%</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">));</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Simple as it is. We’re adding linear gradient, going from the top to the bottom vertically. Our gradient consists of three colors, <code>color-stop</code> simply tells the browser where that particular color should stop and the next one begin.<br /><br />The gradient for browsers based on <code>Gecko</code> engine:<br /><br /><div class="syntaxhighlighter  " id="highlighter_542106"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_542106" height="16" id="highlighter_542106_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">background</code><code class="plain">: -moz-linear-gradient(</code><code class="value">top</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />The same as above, only we don’t have to be specific about where each color stops, because it looks great as it is already.<br /><br />Let’s add rounded corners, first for browsers with <code>WebKit</code> engine:<br /><br /><div class="syntaxhighlighter  " id="highlighter_142206"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_142206" height="16" id="highlighter_142206_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />That’s really self explaining. The syntax for browsers with <code>Gecko</code> engine looks like this:<br /><br /><div class="syntaxhighlighter  " id="highlighter_738861"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_738861" height="16" id="highlighter_738861_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />And at last, the proper syntax:<br /><br /><div class="syntaxhighlighter  " id="highlighter_967819"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_967819" height="16" id="highlighter_967819_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Your CSS3 styles for <code>#menu</code> should look like this right about now:<br /><br /><div class="syntaxhighlighter  " id="highlighter_863573"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_863573" height="16" id="highlighter_863573_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">#menu {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: -webkit-gradient(linear, </code><code class="value">left</code> <code class="value">top</code><code class="plain">, </code><code class="value">left</code> <code class="value">bottom</code><code class="plain">, color-stop(</code><code class="value">0%</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">), color-stop(</code><code class="value">40%</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">), color-stop(</code><code class="value">100%</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">));</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: -moz-linear-gradient(</code><code class="value">top</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">    </code><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br /><h4 id="part5.2"><br />Step 2: Spicing Up <code>ul li a</code></h4><br />Here, let’s add rounded corners, text shadow and some subtle transition. We know the syntax for rounded corners already:<br /><br /><script type="text/javascript"><br /></script><br /><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"><br /></script><br /><ins style="background-color: transparent; border: none; display: inline-table; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><ins id="aswift_0_anchor" style="background-color: transparent; border: none; display: block; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><iframe allowtransparency="true" frameborder="0" height="250" hspace="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){w.location.replace(h)}}" scrolling="no" style="left: 0; position: absolute; top: 0;" vspace="0" width="300"></iframe></ins></ins><div class="syntaxhighlighter  " id="highlighter_294028"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_294028" height="16" id="highlighter_294028_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Now, the shadow for our links:<br /><br /><div class="syntaxhighlighter  " id="highlighter_286311"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_286311" height="16" id="highlighter_286311_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">1px</code> <code class="value">#000</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />This will place the shadow 1px to the right and below our link. The shadow will have 1px blur radius and black color.<br /><br />Now, our smooth transition:<br /><br /><div class="syntaxhighlighter  " id="highlighter_377109"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_377109" height="16" id="highlighter_377109_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-webkit-transition-property: color, background;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">-webkit-transition-duration: </code><code class="value">0.5</code><code class="plain">s, </code><code class="value">0.5</code><code class="plain">s;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />The <code>transition-property</code> determines which properties fall under the transition, in our case it will be <code>color</code> along with <code>background</code>. The <code>transition-duration</code> determines how long the transition should last, it will be <i>0.5s</i> for <code>color</code> and <i>0.5s</i> for <code>background</code> accordingly.<br /><br />Your CSS3 styles for <code>ul li a</code> should look like this:<br /><br /><div class="syntaxhighlighter  " id="highlighter_183881"><br /><div class="bar "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_183881" height="16" id="highlighter_183881_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">ul li a {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">1px</code> <code class="value">#000</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-property: color, background;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>9</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-duration: </code><code class="value">0.5</code><code class="plain">s, </code><code class="value">0.5</code><code class="plain">s;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>10</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br /><h4 id="part5.3"><br />Step 3: Spicing Up <code>ul li a:hover</code></h4><br />Nothing new here, CSS3-wise:<br /><br /><div class="syntaxhighlighter  " id="highlighter_514120"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_514120" height="16" id="highlighter_514120_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">ul li a:hover {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-property: color, background;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-duration: </code><code class="value">0.5</code><code class="plain">s, </code><code class="value">0.5</code><code class="plain">s;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br /><h4><br />Step 4: Spicing Up <code>.default</code></h4><br />Here we’ll add only box shadow:<br /><br /><div class="syntaxhighlighter  " id="highlighter_433195"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_433195" height="16" id="highlighter_433195_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-webkit-box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">-moz-box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Similiar to <code>text-shadow</code>, this will place the shadow 0px to the right and 5px below our menu. The shadow will have 20px blur radius and <code>#888</code> color.<br /><br /><h4 id="part5.5"><br />Step 5: Spicing Up <code>.fixed</code></h4><br />The same goes for <code>.fixed</code>, we’ll add only box shadow:<br /><br /><div class="syntaxhighlighter  " id="highlighter_997558"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_997558" height="16" id="highlighter_997558_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">-webkit-box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">-moz-box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />This time it will place the shadow 0px to the right and 0px below our menu, but the shadow will have 40px blur radius and <code>#222</code> color.<br /><br />The <b>entire</b> file should look like this right now:<br /><br /><div class="syntaxhighlighter  " id="highlighter_860682"><br /><div class="bar      "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_860682" height="16" id="highlighter_860682_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">body {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">#efefef</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">    </code><code class="keyword">border</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">    </code><code class="keyword">font</code><code class="plain">: </code><code class="value">normal</code> <code class="value">13px</code> <code class="color1">Verdana</code><code class="plain">, </code><code class="color1">sans-serif</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>9</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>10</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>11</code></td><td class="content"><code class="plain">#header {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">#0F1620</code> <code class="value">url</code><code class="plain">(bg.jpg) </code><code class="value">no-repeat</code> <code class="value">top</code> <code class="value">center</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">100%</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">120px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">    </code><code class="keyword">border</code><code class="plain">: </code><code class="value">solid</code> <code class="value">#0F1620</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">    </code><code class="keyword">border-width</code><code class="plain">: </code><code class="value">3px</code> <code class="value">0</code> <code class="value">3px</code> <code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>17</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>18</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>19</code></td><td class="content"><code class="plain">#navi {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-top</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>22</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>23</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>24</code></td><td class="content"><code class="plain">#menu {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>25</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: -webkit-gradient(linear, </code><code class="value">left</code> <code class="value">top</code><code class="plain">, </code><code class="value">left</code> <code class="value">bottom</code><code class="plain">, color-stop(</code><code class="value">0%</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">), color-stop(</code><code class="value">40%</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">), color-stop(</code><code class="value">100%</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">));</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>26</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: -moz-linear-gradient(</code><code class="value">top</code><code class="plain">, </code><code class="value">#426d9c</code><code class="plain">, </code><code class="value">#0f67a1</code><code class="plain">, </code><code class="value">#1384d1</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>27</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>28</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>29</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>30</code></td><td class="content"><code class="spaces">    </code><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>31</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>32</code></td><td class="content"><code class="spaces">    </code><code class="keyword">line-height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>33</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">center</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>34</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>35</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>36</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>37</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>38</code></td><td class="content"><code class="plain">#content {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>39</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">750px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>40</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin</code><code class="plain">: </code><code class="value">0</code> <code class="value">auto</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>41</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-bottom</code><code class="plain">: </code><code class="value">25px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>42</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">30px</code> <code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>43</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-align</code><code class="plain">: </code><code class="value">left</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>44</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>45</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>46</code></td><td class="content"><code class="plain">ul {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>47</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>48</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>49</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>50</code></td><td class="content"><code class="plain">ul li {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>51</code></td><td class="content"><code class="spaces">    </code><code class="keyword">list-style-type</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>52</code></td><td class="content"><code class="spaces">    </code><code class="keyword">display</code><code class="plain">: </code><code class="value">inline</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>53</code></td><td class="content"><code class="spaces">    </code><code class="keyword">margin-right</code><code class="plain">: </code><code class="value">15px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>54</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>55</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>56</code></td><td class="content"><code class="plain">ul li a {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>57</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#fff</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>58</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-decoration</code><code class="plain">: </code><code class="value">none</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>59</code></td><td class="content"><code class="spaces">    </code><code class="keyword">padding</code><code class="plain">: </code><code class="value">3px</code> <code class="value">7px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>60</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>61</code></td><td class="content"><code class="spaces">    </code><code class="keyword">text-shadow</code><code class="plain">: </code><code class="value">1px</code> <code class="value">1px</code> <code class="value">1px</code> <code class="value">#000</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>62</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>63</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>64</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>65</code></td><td class="content"><code class="spaces">    </code><code class="plain">border-radius: </code><code class="value">5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>66</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>67</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-property: color, background;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>68</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-duration: </code><code class="value">0.5</code><code class="plain">s, </code><code class="value">0.5</code><code class="plain">s;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>69</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>70</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>71</code></td><td class="content"><code class="plain">ul li a:hover {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>72</code></td><td class="content"><code class="spaces">    </code><code class="keyword">background</code><code class="plain">: </code><code class="value">#01458e</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>73</code></td><td class="content"><code class="spaces">    </code><code class="keyword">color</code><code class="plain">: </code><code class="value">#ff0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>74</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>75</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-property: color, background;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>76</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-transition-duration: </code><code class="value">0.5</code><code class="plain">s, </code><code class="value">0.5</code><code class="plain">s;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>77</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>78</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>79</code></td><td class="content"><code class="plain">.</code><code class="value">default</code> <code class="plain">{</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>80</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">850px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>81</code></td><td class="content"><code class="spaces">    </code><code class="keyword">height</code><code class="plain">: </code><code class="value">50px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>82</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>83</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>84</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>85</code></td><td class="content"><code class="spaces">    </code><code class="plain">box-shadow: </code><code class="value">0</code> <code class="value">5px</code> <code class="value">20px</code> <code class="value">#888</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>86</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>87</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>88</code></td><td class="content"><code class="plain">.</code><code class="value">fixed</code> <code class="plain">{</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>89</code></td><td class="content"><code class="spaces">    </code><code class="keyword">position</code><code class="plain">: </code><code class="value">fixed</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>90</code></td><td class="content"><code class="spaces">    </code><code class="keyword">top</code><code class="plain">: </code><code class="value">-5px</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>91</code></td><td class="content"><code class="spaces">    </code><code class="keyword">left</code><code class="plain">: </code><code class="value">0</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>92</code></td><td class="content"><code class="spaces">    </code><code class="keyword">width</code><code class="plain">: </code><code class="value">100%</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>93</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>94</code></td><td class="content"><code class="spaces">    </code><code class="plain">-webkit-box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>95</code></td><td class="content"><code class="spaces">    </code><code class="plain">-moz-box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>96</code></td><td class="content"><code class="spaces">    </code><code class="plain">box-shadow: </code><code class="value">0</code> <code class="value">0</code> <code class="value">40px</code> <code class="value">#222</code><code class="plain">;</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>97</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Great job, we’re done with CSS. Let’s add some jQuery!<br /><br /><h2 id="part6"><br />jQuery Magic</h2><br />All our code should be executed after the <code>DOM</code> is loaded. For that we’ll use this great method jQuery has, called <code>.ready()</code>. You’re probably familiar with the long notation:<br /><br /><div class="syntaxhighlighter  " id="highlighter_242291"><br /><div class="bar "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_242291" height="16" id="highlighter_242291_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">$(document).ready(</code><code class="keyword">function</code><code class="plain">() {</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="comments">// all our code will go here</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />But this time let’s use the short notation, which does exactly the same thing:<br /><br /><div class="syntaxhighlighter  " id="highlighter_721407"><br /><div class="bar "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_721407" height="16" id="highlighter_721407_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">$(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="comments">// all our code will go here</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Now, first thing we should do, is to grab our menu (which is a <code>div</code> with ID “menu”) and assign it to a variable, because we’ll use it several times. The same goes for its position, and for that we’ll use jQuery’s <code>.offset()</code> method which, unlike <code>.position()</code> method, returns the position of the element we use it on relatively to the document, not to the offset parent. Let’s do it:<br /><br /><div class="syntaxhighlighter  " id="highlighter_948004"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_948004" height="16" id="highlighter_948004_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">menu = $(</code><code class="string">'#menu'</code><code class="plain">),</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="plain">pos = menu.offset();</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Next, we need to listen for the scroll event, so every time we scroll the page up or down something happens:<br /><br /><div class="syntaxhighlighter  " id="highlighter_400583"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_400583" height="16" id="highlighter_400583_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">$(window).scroll(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="comments">// code here</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Now we need to check if we scrolled down so far that our menu is not visible anymore. This point is exactly the position of our menu from the top + its height. We also need to check if the menu is now in its default position and has the default look:<br /><br /><div class="syntaxhighlighter  " id="highlighter_273661"><br /><div class="bar  "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_273661" height="16" id="highlighter_273661_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">if</code><code class="plain">($(</code><code class="keyword">this</code><code class="plain">).scrollTop() > pos.top+menu.height() && menu.hasClass(</code><code class="string">'default'</code><code class="plain">)){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="comments">// code here</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />If the result of our <code>if</code> statement is true – we want the menu to fade out, the we need to remove the <code>.default</code> class, give it a class of <code>.fixed</code> and then fade it back in, so we can see it:<br /><br /><div class="syntaxhighlighter  " id="highlighter_234843"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_234843" height="16" id="highlighter_234843_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">menu.fadeOut(</code><code class="string">'fast'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).removeClass(</code><code class="string">'default'</code><code class="plain">).addClass(</code><code class="string">'fixed'</code><code class="plain">).fadeIn(</code><code class="string">'fast'</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Right now the effect works only in 50%; it fades out when you scroll down and then it reappears at the top of your browser window – but it doesn’t return to its original position and size when you scroll back up. Let’s fix it now.<br /><br />For this we need another <code>if</code> statement. This one will be the exact opposite of the first one we made, so:<br /><br /><div class="syntaxhighlighter  " id="highlighter_19115"><br /><div class="bar "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_19115" height="16" id="highlighter_19115_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">else</code> <code class="keyword">if</code><code class="plain">($(</code><code class="keyword">this</code><code class="plain">).scrollTop() <= pos.top && menu.hasClass(</code><code class="string">'fixed'</code><code class="plain">)){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="comments">// code here</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />If the result of our statement is true, we want the menu to fade out again, remove the <code>.fixed</code> class and give it a class of <code>.default</code> this time, and then we want it to fade back in, so it’s visible to us:<br /><br /><div class="syntaxhighlighter  " id="highlighter_971714"><br /><div class="bar"><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_971714" height="16" id="highlighter_971714_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">menu.fadeOut(</code><code class="string">'fast'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">    </code><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).removeClass(</code><code class="string">'fixed'</code><code class="plain">).addClass(</code><code class="string">'default'</code><code class="plain">).fadeIn(</code><code class="string">'fast'</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />The script is complete now, this is how it should look:<br /><br /><div class="syntaxhighlighter  " id="highlighter_952665"><br /><div class="bar   "><br /><div class="toolbar"><br /><a class="item viewSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#viewSource" style="height: 16px; width: 16px;" title="view source">view source</a><br /><br /><div class="item copyToClipboard"><br /><embed allowscriptaccess="always" flashvars="highlighterId=highlighter_952665" height="16" id="highlighter_952665_clipboard" menu="false" src="http://www.1stwebdesigner.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf" title="copy to clipboard" type="application/x-shockwave-flash" width="16" wmode="transparent"></embed></div><br /><a class="item printSource" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#printSource" style="height: 16px; width: 16px;" title="print">print</a><a class="item about" href="http://www.blogger.com/blogger.g?blogID=2377571801251927013#about" style="height: 16px; width: 16px;" title="?">?</a></div><br /></div><br /><div class="lines"><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>1</code></td><td class="content"><code class="plain">$(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>2</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">    </code><code class="keyword">var</code> <code class="plain">menu = $(</code><code class="string">'#menu'</code><code class="plain">),</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">        </code><code class="plain">pos = menu.offset();</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>5</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">        </code><code class="plain">$(window).scroll(</code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">            </code><code class="keyword">if</code><code class="plain">($(</code><code class="keyword">this</code><code class="plain">).scrollTop() > pos.top+menu.height() && menu.hasClass(</code><code class="string">'default'</code><code class="plain">)){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">                </code><code class="plain">menu.fadeOut(</code><code class="string">'fast'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>9</code></td><td class="content"><code class="spaces">                    </code><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).removeClass(</code><code class="string">'default'</code><code class="plain">).addClass(</code><code class="string">'fixed'</code><code class="plain">).fadeIn(</code><code class="string">'fast'</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">                </code><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">            </code><code class="plain">} </code><code class="keyword">else</code> <code class="keyword">if</code><code class="plain">($(</code><code class="keyword">this</code><code class="plain">).scrollTop() <= pos.top && menu.hasClass(</code><code class="string">'fixed'</code><code class="plain">)){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">                </code><code class="plain">menu.fadeOut(</code><code class="string">'fast'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(){</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">                    </code><code class="plain">$(</code><code class="keyword">this</code><code class="plain">).removeClass(</code><code class="string">'fixed'</code><code class="plain">).addClass(</code><code class="string">'default'</code><code class="plain">).fadeIn(</code><code class="string">'fast'</code><code class="plain">);</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">                </code><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">            </code><code class="plain">}</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">        </code><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /><div class="line alt1"><br /><table><tbody><br /><tr><td class="number"><code>17</code></td><td class="content"></td></tr><br /></tbody></table><br /></div><br /><div class="line alt2"><br /><table><tbody><br /><tr><td class="number"><code>18</code></td><td class="content"><code class="plain">});</code></td></tr><br /></tbody></table><br /></div><br /></div><br /></div><br />Well done! Now, go and implement it somewhere and have fun :).<br /><br /><h2 id="part7"><br />After Word</h2><br />With a little customization you can easily tweak the whole thing to your liking and/or need, which makes this little effect very useful. Combine it with CSS3 and you’re done :). That’s it guys! If you have any questions, feel free to ask in the comments, I’ll do my best to answer them. Cheers!<br /><br /><br /><br /> </div><br /></div><br />

How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

In the project I was working on recently I had a chance to experiment with CSS3 and jQuery. You know CSS3, right? It’s that thing that makes...