javascript - Use css to implement navigation bar on the web?

Question

1. How to make the navigation bar look like the left side of http://chuangzaoshi.com/code?
2. Can it be fully realized using css? How to implement pure css? How to implement js?
Thanks!

ps: Thanks to the two masters for their answers. I didn’t make it clear. My questions are as follows:

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

I don’t know how to implement this, so I hope you can enlighten me.

Answer 1

Which effect are you referring to? :hover Reverse, nothing too complicated.
You have already given the example yourself, just open its code and compare it.
If you don’t understand a specific style or effect, you can ask for more details.
It’s too broad to directly ask how to implement the whole thing. It’s just like the example.
Have you given the implementation example? The css and js have been shown to you, so you can refer to them directly.

Based on your newly added question

Click a large label such as design in the left navigation to automatically collapse the original one and pop up the current ul, while the content on the right changes accordingly.

You can see that every time you click on a large label, it actually jumps to another page. The ul under all large labels are closed by default.
Then according to the current page, you will find that the current large label will have an active class name, and the ul you want to open will follow it, so it is simple:

css method is .active + ul { display:block; }

jquery method is $('.active').next('ul').css('display','block');

Other methods are similar. They all obtain the active activity tag and indicate the small tag list under it to display.
According to the example you gave, since it is not written in css, but inserted into the style attribute, it should be implemented using js.

Answer 2

Do you want the discoloration effect when you move the mouse over it?

• If you use CSS to implement it, use a list on the left side, then change the style, use the :hoverpseudo class to match the style of moving the mouse over
  For example

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

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

• If implemented with JS, it is necessary to monitor the mouse entry event of the corresponding elementonmouseenter, set the styles of all items in the list to regular styles except the current item, and also listen to the mouse leave event of the elementonmouseleave , when the mouse leaves, the style set when the mouse passes over needs to be restored to the regular style.

Update

It is recommended that you describe the details of the problem clearly the first time you ask a question next time, otherwise the respondent's time will be wasted.

In response to the question you asked later,

The HTML layout on the left is probably like this

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

Then, move the mouse over the whitened one, as mentioned above.
If you click, add a CSS class to the clicked <li>, such as .active, and then add the previous :hover, the CSS is similar to this:

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

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

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

Of course, since the current label and the mouseover style in this example are the same, you can combine ul li:hover and ul li.active to write

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

In this way, you won’t be able to switch tabs. The HTML layout on the right side looks like this:

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

By default, CSS is used to display the first child p in #main and hide the others. It is recommended to add the .active class to p. The .active class will be displayed, otherwise it will be hidden.

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

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

Then, write JS events, but the native one is more painful to write. It is recommended to use jQuery to operate. Here are two examples of writing methods
Native:

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 = '';
            }
        }
    }
});

If you use the jQuery library, it will be much simpler, as follows:

$('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');
});

Conclusion

This explains so much, but I want to tell you a very devastating news. That is, the example website you gave may not do this at all. This website may have 4 pages and then jump to each other through links, and the label of the current page on each page is always lit. (I didn’t look at the source code carefully, but I didn’t know whether it was routing based on the different URL addresses, so I just said “possibly”).