84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
1、如何实现导航栏就像http://chuangzaoshi.com/code左侧一样？2、能用css完全实现吗？纯css怎么实现？js怎么实现？谢谢！
ps：感谢两位大神的答案，我没说清楚，我的疑难如下：
左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。
这个如何实现不清楚，还望赐教。
你指的是哪个效果？ :hover 反白，没什么太复杂的啊。例子你自己已经给出来了，你就打开他的代码对照即可。如果有哪个特定样式或者效果不理解，可以再问详细点。这样直接问整个怎么实现太宽泛了，就是例子当中那样实现的呀，你注视已经把实现的例子给出来了么？css 和 js 人家都给你看到了，可以直接参考。
根据你新追加的提问
你可以看到，每次点击大标签，其实都是跳转到别的页面，所有大标签下的 ul 默认都是收起的。然后根据当前所在页你会发现当前大标签会被带上一个 active 的 class 名，想要打开的 ul 是紧跟其后，于是就简单了：
css 方法是.active + ul { display:block; }
.active + ul { display:block; }
jquery 方法是$('.active').next('ul').css('display','block');
$('.active').next('ul').css('display','block');
其他方式大同小异，都是取得 active 活动标签，注明其下小标签列表显示即可。根据你给出的例子看，由于他不是写在 css 里，而是插入 style 属性，应该是用 js 实现的。
你是要鼠标移动过去的变色效果吧？
用CSS实现的话，左边用列表做，然后改样式，用:hover伪类去配鼠标移动过去的样式比如
:hover
ul li { ... // 此处为常规样式 } ul li:hover { ... // 此处为鼠标经过的样式 }
如果用JS实现的话，就要监听对应元素的鼠标进入事件onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。
onmouseenter
onmouseleave
建议下次问问题时候第一次就把问题详细情况描述清楚，否则会浪费回答者的时间的。
针对你后来问的问题，
左侧的HTML布局大概是这样
...
然后，鼠标移过变白的，上面已经说过了。点击的话，则是给被点击的加上一个CSS类，比如.active，然后，加上之前的加上一个CSS类，比如.active，然后，加上之前的:hover，CSS类似这样：
.active
ul li { ... // 此处为常规样式 } ul li:hover { ... // 此处为鼠标经过的样式 } ul li.active { ... // 此处为当前标签的样式 }
当然，由于此例子中当前标签和鼠标经过样式一样，可以把ul li:hover和ul li.active合起来写作
ul li:hover
ul li.active
ul li:hover, ul li.active { ... // 此处为鼠标经过的样式（即当前标签样式） }
这样，还不至于能够切换标签，右侧的HTML布局大概这样：
默认用CSS将#main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active类的显示，反之隐藏。
#main
p
#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地址不同也不清楚是不是做的路由，所以只是说“可能”）。
你指的是哪个效果？ :hover 反白，没什么太复杂的啊。
例子你自己已经给出来了，你就打开他的代码对照即可。
如果有哪个特定样式或者效果不理解，可以再问详细点。
这样直接问整个怎么实现太宽泛了，就是例子当中那样实现的呀，
你注视已经把实现的例子给出来了么？css 和 js 人家都给你看到了，可以直接参考。
根据你新追加的提问
你可以看到，每次点击大标签，其实都是跳转到别的页面，所有大标签下的 ul 默认都是收起的。
然后根据当前所在页你会发现当前大标签会被带上一个 active 的 class 名，想要打开的 ul 是紧跟其后，于是就简单了：
css 方法是
.active + ul { display:block; }jquery 方法是
$('.active').next('ul').css('display','block');其他方式大同小异，都是取得 active 活动标签，注明其下小标签列表显示即可。
根据你给出的例子看，由于他不是写在 css 里，而是插入 style 属性，应该是用 js 实现的。
你是要鼠标移动过去的变色效果吧？
用CSS实现的话，左边用列表做，然后改样式，用
:hover伪类去配鼠标移动过去的样式比如
如果用JS实现的话，就要监听对应元素的鼠标进入事件
onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。Update
建议下次问问题时候第一次就把问题详细情况描述清楚，否则会浪费回答者的时间的。
针对你后来问的问题，
左侧的HTML布局大概是这样
然后，鼠标移过变白的，上面已经说过了。
点击的话，则是给被点击的
加上一个CSS类，比如.active，然后，加上之前的加上一个CSS类，比如.active，然后，加上之前的:hover，CSS类似这样：当然，由于此例子中当前标签和鼠标经过样式一样，可以把
ul li:hover和ul li.active合起来写作这样，还不至于能够切换标签，右侧的HTML布局大概这样：
默认用CSS将
#main中第一个子p显示出来，将其他的隐藏，建议也给p加上.active类，有.active类的显示，反之隐藏。然后，写JS事件，不过原生的写起来比较蛋疼，建议用jQuery来操作，下面给出两种写法示例
原生：
如果用jQuery库，就会简单很多，如下：
结语
这解释了这么多，但是我想告诉你一个很让人崩溃的消息。就是，你给的示例网站，可能根本没有这么做。这个网站有可能是做了4个页面然后通过链接互相跳转的，而每个页面上面当前页的标签是一直亮着的。（由于没有仔细去看源码，但是看URL地址不同也不清楚是不是做的路由，所以只是说“可能”）。