创建一个‘精灵’导航菜单,基于 CSS Sprites And MooTools or jQuery
关于CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。但是,对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需 顾忌这个问题。对于大型网站和流量比较大的网站,此技术非常具有优势。
知识扩展:《解密CSS Sprites:技巧、工具和教程》
这一段时间CSS Sprites技术又流行起来了,这是为什么那?根本原因就是我上面所说的。 Dave Shea 作者写的CSS Sprites 导航条文章 《 CSS Sprites2 – It’s JavaScript Time》 在他的教程中,他为我们讲了 用jQuery 技术加强 CSS sprite 菜单的方法。我非常喜欢他的文章,我今天就把它转换为MooTools版的 CSS sprite 菜单。
The jQuery 版本
完整的教程地址: CSS Sprites2 – It’s JavaScript Time
,基于jQuery
演示效果一: Example 4: Scripted hover events.
演示效果二: Example 5: Putting it all together.
演示效果三: Example 6: One easy line of script to modify, thanks to the pre-built function.
The MooTools 版本
效果演示:Demo
The HTML
1 2 3 4 5 6 | <ul id="nav"> <li id="home" <?php echo $current == '' || $current == 'home' ? 'class="current"' : ''; ?>><a href="?home">Home</a></li> <li id="about" <?php echo $current == 'about' ? 'class="current"' : ''; ?>><a href="?about">About</a></li> <li id="services"<?php echo $current == 'services' ? 'class="current"' : ''; ?>><a href="?services">Services</a></li> <li id="contact"<?php echo $current == 'contact' ? 'class="current"' : ''; ?>><a href="?contact">Contact</a></li> </ul> |
以上的代码和原作者的代码一样,只不过我选择使用ID,而不是CSS类。
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #nav { width: 401px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat; position: absolute; top: 100px; left: 100px; padding:0; } #nav li { display: inline; } #nav li a:link, #nav li a:visited { position: absolute; top: 0; height: 48px; text-indent: -9000px; overflow: hidden; z-index: 10; } #home a:link, #home a:visited { left: 23px; width: 76px; } #home a:hover, #home a:focus { background: url(sprites-blue-nav.gif) no-repeat -23px -49px; } #home a:active { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; } #home.current a:link, #home.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -23px -147px; cursor: default; } .nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -23px -49px; } .nav-home-click { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; } #about a:link, #about a:visited { left: 100px; width: 82px; } #about a:hover, #about a:focus { background: url(sprites-blue-nav.gif) no-repeat -100px -49px; } #about a:active { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; } #about.current a:link, #about.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -100px -147px; cursor: default; } .nav-about, .nav-about-click { position: absolute; top: 0; left: 100px; width: 82px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -100px -49px; } .nav-about-click { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; } #services a:link, #services a:visited { left: 183px; width: 97px; } #services a:hover, #services a:focus { background: url(sprites-blue-nav.gif) no-repeat -183px -49px; } #services a:active { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; } #services.current a:link, #services.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -183px -147px; cursor: default; } .nav-services, .nav-services-click { position: absolute; top: 0; left: 183px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -183px -49px; } .nav-services-click { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; } #contact a:link, #contact a:visited { left: 281px; width: 97px; } #contact a:hover, #contact a:focus { background: url(sprites-blue-nav.gif) no-repeat -281px -49px; } #contact a:active { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; } #contact.current a:link, #contact.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -281px -147px; cursor: default; } .nav-contact, .nav-contact-click { position: absolute; top: 0; left: 281px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -281px -49px; } .nav-contact-click { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; } |
不幸的是有大量的CSS 代码。这是普遍使用Sprite技术的一个缺点,但回报较少请求到服务器是值得的。我的CSS不同于原作者,因为我我选择了ID控制样式的。
The MooTools Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | (function($) { window.addEvent('domready',function() { $('nav').getElements('li').each(function(li) { //settings var link = li.getFirst('a'); //fix background image if(!li.hasClass('current')) { link.setStyle('background-image','none'); } //utility div var div = new Element('div',{ 'class': 'nav-' + li.get('id'), opacity: 0 }).inject(li); //background imagery li.addEvents({ mouseenter: function() { div.fade('in'); }, mouseleave: function() { div.fade('out'); }, mousedown: function() { div.addClass('nav-' + li.get('id') + '-click'); }, mouseup: function() { div.removeClass('nav-' + li.get('id') + '-click'); } }); }); }); })(document.id); |
我MooTools版本的代码更少,效率上稍微快一些,I’m not creating and disposing of the same DIVs over and over as the user hovers over each menu item.保持菜单上原有的 selected, hovered, and mousedown states 。
效果演示:Demo
原文教程网址:Create a Sprited Navigation Menu Using CSS and MooTools
文章评论 已经有 0 条评论!