你現在是WEB專家,請你幫我製作一個HTML網頁,需求如下,左邊為母菜單爛,每個菜單欄需要有子菜單,點擊母菜單后出現子菜單,每個菜單可以嵌入網頁,嵌入的網頁畫面呈現在菜單欄的右邊
时间: 2024-05-09 17:15:17 浏览: 9
好的,根据您的需求,我可以为您提供如下示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>菜单示例页面</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
width: 200px;
float: left;
}
li {
padding: 5px 10px;
background-color: #F2F2F2;
border: 1px solid #CCCCCC;
cursor: pointer;
}
li:hover {
background-color: #E6E6E6;
}
iframe {
border: none;
width: 500px;
height: 400px;
float: left;
margin-left: 20px;
}
</style>
<script type="text/javascript">
function showSubMenu(submenuId) {
var submenu = document.getElementById(submenuId);
if (submenu.style.display == "block") {
submenu.style.display = "none";
} else {
submenu.style.display = "block";
}
}
function loadPage(pageUrl) {
var iframe = document.getElementById("pageFrame");
iframe.src = pageUrl;
}
</script>
</head>
<body>
<ul>
<li onclick="showSubMenu('submenu1')">菜单1</li>
<ul id="submenu1" style="display: none;">
<li onclick="loadPage('page1.html')">子菜单1-1</li>
<li onclick="loadPage('page2.html')">子菜单1-2</li>
<li onclick="loadPage('page3.html')">子菜单1-3</li>
</ul>
<li onclick="showSubMenu('submenu2')">菜单2</li>
<ul id="submenu2" style="display: none;">
<li onclick="loadPage('page4.html')">子菜单2-1</li>
<li onclick="loadPage('page5.html')">子菜单2-2</li>
<li onclick="loadPage('page6.html')">子菜单2-3</li>
</ul>
</ul>
<iframe id="pageFrame"></iframe>
</body>
</html>
```
在这个示例中,我们使用了 HTML、CSS 和 JavaScript 三种技术。HTML 用来定义页面结构,CSS 用来设置样式,JavaScript 用来实现动态交互。具体的实现思路如下:
1. 使用 `<ul>` 和 `<li>` 标签来定义菜单结构,并使用 CSS 设置样式,包括菜单的宽度、背景色、边框等;
2. 在每个母菜单上绑定 `onclick` 事件,当用户点击母菜单时,会触发 JavaScript 函数 `showSubMenu()`,该函数会根据子菜单的显示状态来切换子菜单的显示和隐藏;
3. 在每个子菜单上绑定 `onclick` 事件,当用户点击子菜单时,会触发 JavaScript 函数 `loadPage()`,该函数会将指定的页面加载到 iframe 中,从而实现在菜单栏右侧显示嵌入的页面。
需要注意的是,这只是一个示例代码,您可以根据自己的需求进行修改和优化。同时,为了实现更好的用户体验,您可能需要在 JavaScript 中添加一些其他的功能,例如:菜单展开时隐藏其他菜单、页面加载时显示加载提示等。