手机网站的导航制作教程

2012-11-28

为了让Web页面在手机上显示流畅，现在国外很多网站都使用Responsive设计和CSS3 Media Queries的结合来实现。这样的实例到处可见，那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。

如果你的导航选项比较多，放到手机上来浏览就会挤到一起，造成美观性的不足。下面为了解决这样的问题，我们就一起跟随Nick La写的教程《Mobile Navigation Design & Tutorial》学习如何使用jQuery来解决刚才所说的问题。

问题的描述

下面的截图说明了导航布局在手机上的问题。如果你的导航只有三到四个选项，如Web Designer Wall网站，导航刚好一行能显示，但当你的导航选项包含更多时，其实的选项就会被挤压下去，比如说Bitfoundry网站。下面可以看看他们对比的截图：

解决方法

Nick La在教程中罗列了几种相关的解决方法:

1、下拉选择

这种方法是将所有的导航选项放到一个下拉选择控制（select）中，但这种方法并不是很好，因为select的样式要制作到让各浏览器下完全一致是非常的麻烦。除非你使用jQuery的插件，比如说Chosen插件能帮你实现select的样式美化，否则的话你只好采用select的默认样式风格。这也将导致用户的体验不一样，在桌面系统下是链接标签，而在手机上却是下拉选择框。如果你喜欢这种解决方式，你可以仔细阅读CSS-Tricks写的Convert a Menu to a Dropdown for Small Screens一文。也可以参考下面的网站

2、显示成块状

第二种方法是将所有导航通过”display:block”，并将float去掉，将每个导航项设置成一个块项,这是一种快速的解决方法，不过同时也带来一个不足之处，给头部带来很大的空间，本来手机屏幕空间就小，这样一来，整个屏幕或许只能看到你的导航选项了。这样导致用户体验就差，需要滚动到底部才能看到页面的主内容。比如说下面的几个案例。

3、菜单图标

最后一种解决方法是使用菜单图标名菜单按钮。这种效果是借助jquery来实现的。在页面截入时，显示一个菜单的图标或按钮，而导航选项是隐藏的，当你点击这个图标时导航选项将显示出来，再次点击时这们导航选项将隐藏。这种方法将是最适合的一种方法，完全可以通过css来实现，如果你还需要兼容ie的话，那这种功能你就在考虑配合jQ来完成，下面列出几个案例，供大家参考：

在众多按例中，我比较喜欢bootstrap的，大家感兴趣可以去看看bootstrap的api。

jQuery制作手机导航

上面给大家展示了三种不同的方法实现手机导航效果，下面我们来看看如何使用jQuery实现上面介绍的第三种方法。

方法很简单，使用jQuery的prepend方法在导航中插入一个菜单按钮，然后给这个按钮绑定一个click事件，点击实现显示/隐藏效果，具体方法如下：

HTML Markup

< nav id=”nav-wrap”>
    < ul id=”nav”>
       < li>< a href=”#”>Button< /a>< /li>
       < li>< a href=”#”>Button< /a>< /li>
    < /ul>
< /nav>

上面结构是一个制作导航菜单的模板，极其的常见，在些不做过多描述。

jQuery Code

使用jQuery的prepend方法，将“<div id=”menu-icon”>”插入到“<nav id=”nav-wrap”>”前面，并在“div#menu-icon”上绑定一个click事件，实现导航的显示/隐藏功能

jQuery(document).ready(function($){
    / prepend menu icon /
    $(‘#nav-wrap’).prepend(‘< div id=”menu-icon”>Menu< /div>’);

/* toggle nav */
$("#menu-icon").on("click", function(){
    $("#nav").slideToggle();
    $(this).toggleClass("active");
});

    });</pre>

此时导航的HTML Markup并变成下面这样：

< nav id=”nav-wrap”>
    < div id=”menu-icon”>Menu< /div>
    < ul id=”nav”>
        < li>< a href=”#”>Button< /a>< /li>
        < li>< a href=”#”>Button< /a>< /li>
    < /ul>
        < /nav>

CSS Code

结构有了，功能也有了，但还需要CSS来美化，那么有关于CSS详细的代码在此就不做过多得的罗列，此处只给大家介绍几个关键部分。

首先在样式中将“div#menu-icon”隐藏起来（display:none），然后通过CSS3 Media Queries来重置div#menu-icon样式。换句话说当显屏宽度小于600px时，将div#menu-icon重设置为显示(display:block)。

@media screen and (max-width:600px){

#menu-icon {
    color: #000;
    width: 42px;
    height: 30px;
    background: url(images/menu-icon.png) no-repeat left center;
    padding: 8px 10px 42px;
    cursor: pointer;
    border: 1px solid #666;
    display: block;/*显示div#menu-icon*/
}
#nav {
    clear: both;
    position: absolute;
    top: 38px;
    width: 160px;
    z-index: 10000;
    padding: 5px;
    background: #f8f8f8;
    border: 1px solid #999;
    display: none;/*默认隐藏，通过jq实现显示隐藏切换*/
}

}
通过CSS3 Media Queries在手机浏览器上，将#nav设置为隐藏，这样主要实现实初截入时隐藏导航，然后通过上面写的jq来实现，点击“div#menu-icon”图标时，显示导航菜单项，在点击时就隐藏导航菜单项。如图所示：

DEMO效果

上面DEMO是Nick La给大家写的一个效果，感兴趣的话可以看看，不过记得使用iPhone查看，不然就看不到下图的效果：

那么有关于手机上导航制作方法就介绍完了，上面方法各有所长，就像Nick La介绍的一样，最后取决需要大家自己根据需求去定夺，此文仅供参考，希望大家喜欢，如果您觉得对你有所帮助，请将此文发送给你的朋友，如果你还有更好的建议也可以在下面的评论中与我们一起分享您的经验。最后再次感谢Nick La给我们带来这么好的教程。

来源：w3cplus

我爱互联网

前端技术，前端资讯

手机网站的导航制作教程

留言