如何创建网站菜单以将我带到其他页面标题？ [关闭]

Question

我已经使用带有 HTML5 的 Notepad ++ 创建了一个网站。我有 4 页，所有这些页上都有许多不同的标题。我创建了一个包含 4 个页面的下拉菜单，其中一些页面上的标题有子列表。我如何能够链接页面，以便当用户单击菜单中的标题时，它会将他们带到相应页面上的标题。

这是我的列表，但子标题不起作用：

• 主页
• 互联网
  • 历史
• HTML
  • 历史
  • 历代
  • HTML 还是 XHTML？
• CSS
  • 历史

Answer 1

您可以简单地在<li> 中使用<a> 标签来创建如下导航栏。

<ul>
  <li><a href="home_page.html">Home</a></li>
  <li><a href="internet_page.html">The Internet</a>
     <ul>
        <li><a href="internet_history_page.html">History</a></li>  
     </ul>            
  </li>
  <li><a href="html_page.html">HTML</a>
     <ul>
        <li><a href="html_history_page.html">History</a></li>  
        <li><a href="ages_page.html">Through the ages</a></li>  
        <li><a href="html_or_xhtml_page.html">HTML or XHTML?</a></li>  
     </ul>            
  </li>
  <li><a href="css_page.html">CSS</a>
     <ul>
        <li><a href="internet_history_page.html">History</a></li>  
     </ul>            
  </li>
</ul>

查看更多信息here

Answer 2

方法一：使用select和javascript

如果您使用的是<select> 下拉菜单，则可以使用 Javascript 执行此操作，如下所示

function href(elem) {
  var value = elem.options[elem.selectedIndex].value;
  if ( value ) {
    window.location.href = value;
  }
}

<a href="home.html">Home Page</a>

<select onchange="href(this)">
  <option>Title</option>
  <option value="page1.html#h1">Page 1 - 1</option>
  <option value="page1.html#h2">Page 1 - 2</option>
  <option value="page1.html#h3">Page 1 - 3</option>
</select>

<select onchange="href(this)">
  <option>Title 2</option>
  <option value="page2.html#h1">Page 2 - 1</option>
  <option value="page2.html#h2">Page 2 - 2</option>
  <option value="page2.html#h3">Page 2 - 3</option>
</select>

然后，在页面标题中添加id="h1"、id="h2"、id="h3"。页面名称后的# 链接到具有相同id 的元素。阅读更多here

确保将第一个 sn-p 放在 <script> 标记中

方法二：使用details和a标签

HTML5 标签details-tag 是一个下拉元素，可用于菜单。示例：

/* Put in <style> tag */

details {
  cursor: pointer;
}
details div {
  margin-left: 20px;
}

<details>
  <summary>Some header</summary>
  <div>
    <a href="page.html">Some page</a>
    <br />
    <a href="page.html">Some page</a>
    <br />
    <a href="page.html">Some page</a>
  </div>
</details>
<details>
  <summary>Some header2</summary>
  <div>
    <a href="page.html">Some page2</a>
    <br />
    <a href="page.html">Some page2</a>
    <br />
    <a href="page.html">Some page2</a>
  </div>
</details>

阅读更多here

方法3：使用CSS3

如果您复制 Lal 的答案，并添加一些 CSS 魔法，您可以创建一个简单的下拉菜单。安全的this 文件到您的服务器（或仅使用 csswizardry 的文件 url）并包含下一个代码，您将获得一个不错的下拉列表

<link rel="stylesheet" type="text/css" href="http://yoursite.com/path/to/file/style.css" />

或者使用 csswizardry 的文件：

<link rel="stylesheet" type="text/css" href="http://csswizardry.com/demos/css-dropdown/css/style.css" />

你会得到这个：

<!-- The css from csswizardry.com -->
<link rel="stylesheet" type="text/css" href="https://csswizardry.com/demos/css-dropdown/css/style.css" />

<!-- Your menu, make sure you have "id='nav'" also included!-->
<ul id="nav">
  <li><a href="home_page.html">Home</a></li>
  <li><a href="internet_page.html">The Internet</a>
     <ul>
        <li><a href="internet_history_page.html">History</a></li>  
     </ul>            
  </li>
  <li><a href="html_page.html">HTML</a>
     <ul>
        <li><a href="html_history_page.html">History</a></li>  
        <li><a href="ages_page.html">Through the ages</a></li>  
        <li><a href="html_or_xhtml_page.html">HTML or XHTML?</a></li>  
     </ul>            
  </li>
  <li><a href="css_page.html">CSS</a>
     <ul>
        <li><a href="internet_history_page.html">History</a></li>  
     </ul>            
  </li>
</ul>