你現在是WEB專家,請你幫我製作一個HTML網頁,需求如下,左邊為母菜單爛,每個菜單欄需要有子菜單,點擊母菜單后出現子菜單,每個菜單可以嵌入網頁,嵌入的網頁畫面呈現在菜單欄的右邊
时间: 2024-05-09 12:16:01 浏览: 19
好的,以下是一个示例的HTML代码,根据你的需求进行修改即可。
```html
<!DOCTYPE html>
<html>
<head>
<title>菜单栏</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#menu-container {
display: flex;
height: 100vh;
}
#sidebar {
flex: 0 0 200px;
background-color: #f0f0f0;
}
#main-content {
flex: 1;
padding: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
cursor: pointer;
}
li:hover {
background-color: #ccc;
}
.sub-menu {
display: none;
margin-left: 20px;
}
.active .sub-menu {
display: block;
}
iframe {
width: 100%;
height: calc(100vh - 100px);
border: none;
}
</style>
</head>
<body>
<div id="menu-container">
<div id="sidebar">
<ul>
<li class="menu-item">菜单1
<ul class="sub-menu">
<li class="sub-menu-item"><a href="https://www.example.com/page1.html" target="content-frame">子菜单1</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page2.html" target="content-frame">子菜单2</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page3.html" target="content-frame">子菜单3</a></li>
</ul>
</li>
<li class="menu-item">菜单2
<ul class="sub-menu">
<li class="sub-menu-item"><a href="https://www.example.com/page4.html" target="content-frame">子菜单4</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page5.html" target="content-frame">子菜单5</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page6.html" target="content-frame">子菜单6</a></li>
</ul>
</li>
<li class="menu-item">菜单3
<ul class="sub-menu">
<li class="sub-menu-item"><a href="https://www.example.com/page7.html" target="content-frame">子菜单7</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page8.html" target="content-frame">子菜单8</a></li>
<li class="sub-menu-item"><a href="https://www.example.com/page9.html" target="content-frame">子菜单9</a></li>
</ul>
</li>
</ul>
</div>
<div id="main-content">
<iframe id="content-frame" name="content-frame"></iframe>
</div>
</div>
<script type="text/javascript">
var menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(menuItem) {
menuItem.addEventListener('click', function() {
// 隐藏其它的子菜单
menuItems.forEach(function(otherMenuItem) {
if (otherMenuItem != menuItem && otherMenuItem.classList.contains('active')) {
otherMenuItem.classList.remove('active');
}
});
// 显示当前菜单的子菜单
menuItem.classList.toggle('active');
});
});
</script>
</body>
</html>
```
在这个示例中,左侧菜单栏使用了嵌套的无序列表,每个菜单项都是一个列表项,如果有子菜单,那么子菜单也是一个嵌套的无序列表。右侧的主要内容区域则是一个 `iframe` 元素,用于显示嵌入的网页。
在 JavaScript 代码中,我们为菜单项绑定了点击事件,当用户点击某个菜单时,会显示或隐藏该菜单的子菜单。同时,如果另一个菜单的子菜单已经显示出来了,那么会将它隐藏起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)