javascript - web上使用css实现导航栏？

Question

1、如何实现导航栏就像http://chuangzaoshi.com/code左侧一样？
2、能用css完全实现吗？纯css怎么实现？js怎么实现？
谢谢！

ps：感谢两位大神的答案，我没说清楚，我的疑难如下：

左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。

这个如何实现不清楚，还望赐教。

Answer 1

你指的是哪个效果？ :hover 反白，没什么太复杂的啊。
例子你自己已经给出来了，你就打开他的代码对照即可。
如果有哪个特定样式或者效果不理解，可以再问详细点。
这样直接问整个怎么实现太宽泛了，就是例子当中那样实现的呀，
你注视已经把实现的例子给出来了么？css 和 js 人家都给你看到了，可以直接参考。

根据你新追加的提问

左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。

你可以看到，每次点击大标签，其实都是跳转到别的页面，所有大标签下的 ul 默认都是收起的。
然后根据当前所在页你会发现当前大标签会被带上一个 active 的 class 名，想要打开的 ul 是紧跟其后，于是就简单了：

css 方法是 .active + ul { display:block; }

jquery 方法是 $('.active').next('ul').css('display','block');

其他方式大同小异，都是取得 active 活动标签，注明其下小标签列表显示即可。
根据你给出的例子看，由于他不是写在 css 里，而是插入 style 属性，应该是用 js 实现的。

Answer 2

你是要鼠标移动过去的变色效果吧？

• 用CSS实现的话，左边用列表做，然后改样式，用:hover伪类去配鼠标移动过去的样式
  比如

ul li {
    ... // 此处为常规样式
}

ul li:hover {
    ... // 此处为鼠标经过的样式
}

• 如果用JS实现的话，就要监听对应元素的鼠标进入事件onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。

Update

建议下次问问题时候第一次就把问题详细情况描述清楚，否则会浪费回答者的时间的。

针对你后来问的问题，

左侧的HTML布局大概是这样

<ul>
    <li></li>
    ...
</ul>

然后，鼠标移过变白的，上面已经说过了。
点击的话，则是给被点击的<li>加上一个CSS类，比如.active，然后，加上之前的<li>加上一个CSS类，比如.active，然后，加上之前的:hover，CSS类似这样：

ul li {
    ... // 此处为常规样式
}

ul li:hover {
    ... // 此处为鼠标经过的样式
}

ul li.active {
    ... // 此处为当前标签的样式
}

当然，由于此例子中当前标签和鼠标经过样式一样，可以把ul li:hover和ul li.active合起来写作

ul li:hover,
ul li.active {
    ... // 此处为鼠标经过的样式（即当前标签样式）
}

这样，还不至于能够切换标签，右侧的HTML布局大概这样：

<p id="main"><!-- 此处不一定要是id="main"，主要是为了方便定位右侧容器的根元素而已，也方便后面示例讲解 -->
    <p></p>
    ...
</p>

默认用CSS将#main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active类的显示，反之隐藏。

#main > p {
    display: none; /* 默认将所有#main下面一级的p全隐藏 */
}

#main > p.active { /* 这个表示#main下面有active类的子p */
    display: block;
}

然后，写JS事件，不过原生的写起来比较蛋疼，建议用jQuery来操作，下面给出两种写法示例
原生：

var li = document.getElementsByTagName('ul')[0].getElementByTagName('li'); // 这个需要自己去写，匹配到ul下的li

var main = document.getElementById('main');
var blocks = main.children();

for(var i = 0, len = li.length; i < len; i++) {
    var bind_li = li[i];
    
    // 给每一个li绑定点击事件，点击事件中，需要清除其他li的`.active`并给自己加上`.active`，另外还要将右侧的p也做一样的操作（上面已经取到p数组blocks）。
    bind_li.onclick = function() {
        for(var j = 0; j < len; j++) {
            if(j == i) { // j和i相等，表示为当前点击的
                li[j].className = 'active';
                blocks[j].className = 'active';
            } else {
                li[j].className = '';
                blocks[j].className = '';
            }
        }
    }
});

如果用jQuery库，就会简单很多，如下：

$('ul li').click(function() { // 点击的li元素
    var index = $(this).index();
    // 获取当前点击的li元素在ul中的顺序，
    // 稍后要同样对#main中的p进行操作
    // 比如点的是第一个li
    // 也就要使#main中的第一个p显示
    $(this)
        .addClass('active') // 给当前li加上.active
        .siblings('li') // 选中同一级其他的li
        .removeClass('active'); // 给同一级其他li去除.active
    $('#main > p').eq(index) // #main下面第index个p
        .addClass('active')
        .siblings('p')
        .removeClass('active');
});

结语

这解释了这么多，但是我想告诉你一个很让人崩溃的消息。就是，你给的示例网站，可能根本没有这么做。这个网站有可能是做了4个页面然后通过链接互相跳转的，而每个页面上面当前页的标签是一直亮着的。（由于没有仔细去看源码，但是看URL地址不同也不清楚是不是做的路由，所以只是说“可能”）。