创建带有图标的导航菜单

2014-05-17  来源:本站原创  分类:产品  人气:0 

在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单。在我看来,菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不会失真等。或许这只是我的想法?但是我们不能创建即好看又好用的菜单吗?

下面是创建下面的有图标支持的导航菜单的代码和样式。

创建带有图标的导航菜单

点击这里 查看演示(在新窗口中打开).

基本标签

1
2
3
4
5
6
<!--navigation.html-->
<ul class="nav">
    <li class="home"><a href="#link">home</a></li>
    <li class="about"><a href="#link">about</a></li>
    <li class="work"><a href="#link">work</a></li>
</ul>

The CSS

1
2
3
4
5
6
7
8
9
10
11
/* style.css */
.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
    .nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
    li.home {background:url(img/nav-home.gif) top left no-repeat;}
        li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
    li.about {background:url(img/nav-about.gif) top left no-repeat;}
        li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
    li.work {background:url(img/nav-work.gif) top left no-repeat;}
        li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
        .nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
        .nav li a:hover {color:#C00;}

在更精细的网站设计中,菜单会变的更多的样式来支持。公平的说,如果你想使用一款特定的字体——事实上很少有网站允许这样做——那么你就需要使用图片、Flash或一些魔法。最后,尽可能保持易用性是非常重要的。

学习的最佳方式是练习,试着吧图标移动到文字的后面,或者创建一个有图标的垂直导航菜单系统。



译者注:其实这是一个很简单的教程,属于入门级别的,没有什么高级的技术,只是提供了一个制作带图标的水平导航菜单的方法。从网站的性能上来说,这样做并不是很好,现在最推荐的方法是CSS Sprite,就是将用到的那些图片放到一个图片文件中,然后通过background-position来分别调用。另外,对于使用特殊文字的情况,现在的情况有了一点小改观,就是CSS3已经开始支持网站的内嵌字体了。

如果你有什么更好的制作此类菜单的方法,不妨与前端观察的朋友一起分享,多谢。

译文出自:http://www.qianduan.net/?p=6214
原文来自:www.zenelements.co.uk

相关文章
  • 创建带有图标的导航菜单 2014-05-17

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不会失真等.或许这只是我的想法?但是我们不能创建即好看又好用的菜单吗? 下面是创建下面的有图标支持的导航菜单的代码和样式. 点击这里 查看演示(在新窗口中打开). 基本标签 1 2 3 4 5 6 <!--navigation.html--> <ul class="nav"&g

  • 使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单 2012-09-12

    日期:2012-9-11 来源:GBin1.com 在线演示 本地下载 在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢! 主要开发使用插件: jQuery one page nav:用来生成单页面网站典型的滚动效果 jQuery scrollTo.js:单页面插件依赖类库 jQuery background position:用来生成动画背景效果 jquery.animate-shadow-min.js:用来生成背景阴影效

  • Jquery+CSS 创建流动导航菜单 Fluid Navigation 2014-11-16

    有时,一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么本文介绍的流动导航菜单Fluid Navigation也可以解决此问题,同时也为网站设计的添加了一些时尚而又动感元素. 那么我们应该如何实现流动导航菜单呢? 一.效果图 鼠标滑过Menu,即Show提示信息. 二.实现步骤 1.CSS代码 menuBarHolder { width: 730px; height:45px; background-color:#000; col

  • 改进你的WordPress导航菜单 -- 输出标题描述 2014-07-21

    在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单.但是像图中这种带描述的导航菜单还无法简单实现,本文将教你改变WordPress默认的菜单输出结构,打造个性的导航菜单. 首先我们先看下默认的输出结构: 1 2 3 4 5 6 <ul id="menu-main"> <li><a href="#">首页&

  • 如何构建下拉滑动式响应导航菜单 2013-08-27

    日期:2013-8-27 来源:GBin1.com 在线演示 在线下载 经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计.在页面上的主要亮点往往是网站主导航.用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕. 在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单.链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px.同时将出现一个小的下拉菜单,图标会切换打开和关闭命令. 演示及下载源代码

  • 制作jquery遮罩层效果导航菜单代码分享 2014-02-22

    我们将创建一个简单的jquery菜单,只要我们悬停在导航栏的区域里,将展示给我们的画面是:明亮的菜单在稍显黑暗的背景图中脱颖而出 jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重.因此必须要使用一个效果:jquery遮罩层.利用明暗效果来突出当前用户的操作. $(function() { var $oe_menu= $('#oe_menu'); var $oe_menu_items= $oe_menu.ch

  • js导航菜单(自写)简单大方 2014-03-17

    一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁找了好多都不适合于是自己写了一个,晒出来与大家分享,感兴趣的朋友可以参考下哈,希望可以帮助到你 最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~ HTML部分 <h2> SuperFish</h2> <ul class="nav" hid="root"> <

  • 自己做一款不错的二级导航菜单 2014-07-27

    自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 多级导航菜单 首页 最近更新 热门推荐 周下载榜 月下载榜 相关教程 美化软件 xp主题 美女明星 影视动漫 清爽系列 颜色专题 3D金属 节日游戏 汽车体育 风景设计 苹果系统 透明专题 vista主题 完美套装 动漫影视 清爽系列 美女主题 3D系列 汽车主题 风景主题 黑色主题 创意设计 系统主题 win7主题 完美套装 风景主题 动漫影视 汽车主题 清爽系列 设计主题 黑色主题 精美推荐 屏幕保护

  • 快速制作CSS导航菜单教 2014-09-18

    随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始.众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成漂亮菜单,今天给大家介绍一款小的软件:CSS Tab Designer! CSS Tab Designer是一款使用CSS来设计导航菜单的可视化软件,软件内置60多种不同风格的样式,只需修改现成样式模版,就能快速生成CSS菜单.特别值 得一提的是,软件生成的XHTML代码严格遵循网页标准,创建的

  • 仿当当网淘宝网等主流电子商务网站商品分类导航菜单 2014-10-04

    本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中 本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中. (1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了

  • 70+漂亮且极具亲和力的导航菜单设计国外网站推荐 2014-11-25

    网站可用性是任何网站的基本要素,而可用的导航更是网站所必需的要素之一.导航决定了用户如何与网站进行交互.如果没有了可用的导航,那么网站内容就会变得毫无用处. 导航菜单应当足够简单以让用户快速了解它,但还要包含一些必要的元素来引导用户浏览整个网站--融入一些有创意且漂亮的设计. 向大家推荐的70款优秀的导航菜单,有些是基于CSS设计的,有些是基于CSS+JavaScript的菜单,还有些是基于Flash的导航菜单设计,它们都有一个共同点:那就是它们都极具创意.界面对用户有好的,且完美的与网站的整体

  • Bootstrap3多级导航菜单 2015-03-18

    AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(Conan), 程序员Java,R,PHP,J

  • 50 个美丽且对用户友好的导航菜单设计 2014-03-31

    Matt Cronin版权所有 作者:Smashing magazine, Matt Cronin 译者:UCD翻译小组 , JJYY 原文:http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/ 对任何网站来说,可用性都是一个重要的设计目标,而友好的导航是其中的要素之一,它决定着用户在网站中如何被引导,如何与网站进行互动.如果没有友好的导航,网页的内容就很难发光和被用

  • CSS混沌初开V:侧边栏导航菜单的实现 2014-05-05

    系列文章索引:<CSS布局实战系列:混沌初开> 首先对教程的第四部分作一点补充.有人建议Blog的标题最好使用H1标签,以文本的形式表现标题内容,原因是不论是在CSS关闭的情况下,还是对于搜索引擎的抓取,H1标签结合文本的形式都具有更好的可访问性.这个提议很有道理,很多人也是这么做的,所以我也建议大家对之前的代码进行调整. 若使用H1标签来实现Blog标题,又想保持原来标题位置的图片的话,那么就有必要了解一下CSS中很经典的图像替换文本技术.简单点说就是在XHTML中包含了文本,并为其设置背景

  • WordPress 3.0导航菜单(使用篇) 2014-10-26

    WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 本文将会介绍并教你如何使用 WordPress 的导航菜单. 管理菜单页面 页面路径: Appearance > Menus 由从界面来看, 能够创建多个菜单, 并且可以向菜单中添加自定义链接, 页面链接和分类链接. 但有一点需要注意, 如果将页面链接和分类链接加入, 被带入菜单的仅是链接, 而不是页面和分类本身, 也就是说, 子页面和子分类不会成为菜单的一部分

  • Angular+Bootstrap3导航菜单 2014-11-10

    编程系列文章" href="http://blog.fens.me/series-angular/" target="_blank"> AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创

  • 70+漂亮且极具亲和力的导航菜单设计推荐 2012-03-09

    网站可用性是任何网站的基本要素,而可用的导航更是网站所必需的要素之一.导航决定了用户如何与网站进行交互.如果没有了可用的导航,那么网站内容就会变得毫无用处.导航菜单应当足够简单以让用户快速了解它,但还要包含一些必要的元素来引导用户浏览整个网站--融入一些有创意且漂亮的设计. 向大家推荐的70款优秀的导航菜单,有些是基于CSS设计的,有些是基于CSS+JavaScript的菜单,还有些是基于Flash的导航菜单设计,它们都有一个共同点:那就是它们都极具创意.界面对用户有好的,且完美的与网站的整体风

  • 300+Jquery, CSS, MooTools 和 JS的导航菜单资源(总有一个适合你!) 2012-03-09

    如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.今天为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了.从非常简单的HTML和CSS导航菜单,到非常复杂和高级的JQuery.JavaScript和MooTools技术,这都可以让你轻松实现褪色.滑动.拖动等效果.如果您觉得这些资源值得一用,那就快把本网页收藏以备日后查阅吧! 1.Fancy menu - 非常酷的导航菜单: 2. 专为Mac爱好者开发的C

  • Jquery, CSS, MooTools 和 JS的导航菜单资源 2012-12-21

    1. Fancy menu - 非常酷的导航菜单: 2. 专为Mac爱好者开发的CSS dock菜单 ,使用jQuery框架. 下载 dock 菜单 3.37个不同的CSS导航菜单技术 : 4.这个导航 五年前就有了,但现在看来依然很棒! 5.漂亮的JQuery滑动效果菜单 ,有四种不同的例子. 6.更新jquery嵌套标签 设置,有演示; 7.垂直JavaScript菜单 ,含子菜单效果. 查看演示 8.13个精选纵向及横向CSS菜单 9.各种不同的CSS菜单教程 10.很全的收集CSS纵向菜

  • EasyUI学习笔记3:导航菜单_ accordion和tree插件 2015-03-24

    一.引言 EasyUI提供了easyui-accordion插件能让我们简单实现非常炫酷的折叠面板效果.此外,EasyUI的tree插件可以用来构建多级菜单.我们可以将accordion和tree插件组合起来构建实用的导航菜单. 二.创建导航菜单 1. 使用accordion创建折叠面板 创建折叠面板需指定元素class="easyui-accordion".accordion容器有几个重要的属性: (1) fit属性,值为true/false, 使折叠面板容器的尺寸适应它的父容器 (