手机上网导航,即为手机上网用户提供网址导航服务,让用户快捷方便的找到自己想用的资源,找到自己想上的网站,提供快捷上网服务.目前知名的手机上网导航站有wap. cn、waps. cn、wap. net. cn、wap. yaha. cn、DYDH. cn等。手机上网,即利用手机为载体,GPRS以及3G途径,进行网上冲浪。
为了让Web页面在手机上能够显示流畅,现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可以见到,那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。如你的导航选项比较多,放到手机上来浏览就会挤到一起来,造成美观性不足。下面来看一下如何解决吧。如你的导航只有三到四个选项,如Web Designer Wall网站,导航刚好一行能够显示,但当你的导航选项包含更多时,其实的选项就会被挤压下去,比如说Bitfoundry网站。下拉选择这种方法是将所有的导航选项放到一个下拉选择控制(select)中,但这种方法并不是很好,因为select的样式要制作到让各浏览器下完全一致是非常的麻烦。除非你使用jQuery的插件,比如说Chosen插件能帮你实现select的样式美化,否则的话你只好采用select的默认样式风格。这也将导致用户的体验不一样,在桌面系统下是链接标签,而在手机上却是下拉选择框。菜单图标,使用菜单图标名菜单按钮。这种效果是借助jquery来实现的。在页面截入时,显示一个菜单的图标或按钮,而导航选项是隐藏的,当你点击这个图标时导航选项将显示出来,再次点击时这们导航选项将隐藏。这种方法将是最适合的一种方法,完全可以通过css来实现,如果你还需要兼容ie的话,那这种功能你就在考虑配合jQ来完成。显示成块状,将所有导航通过” display:block”,并将float去掉,将每个导航项设置成一个块项,这是一种快速的解决方法,不过同时也带来一个不足之处,给头部带来很大的空间,本来手机屏幕空间就小,这样一来,整个屏幕或许只能看到你的导航选项了。这样导致用户体验就差,需要滚动到底部才能看到页面的主内容。
这三种不同的手法实现了手机导航的效果,可以根据自己的实际需要选择适合自己的方法来设计的手机网页的导航,必须要根据自己的实际出发,不能盲目的运用,只有当自己真正的掌握了方法才能使得自己设计的导航美观大方的同时又实现实用的功能,只有做到这样,才是做到了一个好的手机网页的导航。