显示带有自定义 css 标签的 html 文件？

Question

我有一个非常大的树形菜单，它总是一样的。是否可以创建自定义 css 属性（我不知道这个技术术语），这样我就可以在 html 文件中创建菜单，并且只在每个页面的源代码中键入几个字符来制作出现？像这样：

// index.html

<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>

<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>

<div class="content_div">content stuff here</div>
</body>
</html>

// menu.html

<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>

// page_style.css

body {
   body stuff
}

css_nav_thing {
   src: (url="menu.html")
   position: stuff;
   margin: stuff'
   
}

.content_div {
   position: stuff;
   margin: stuff;
   andstuf: stuff;
}

// nav_menu_style.css

body {
   stuff: stuff;
]

a {
   color: #374;
   andstuff: stuff;
}

// content_page.html

<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>

<div class="navigation_div">

<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>

</div>

<div class="content_div">content stuff here</div>
</body>
</html>

// some_other_content_page.html

<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>

<div class="navigation_div">

<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>

</div>

<div class="content_div">content stuff here</div>
</body>
</html>

或者我们可以用 <link src="menu.html" /> 标签做到这一点吗？？？这是否可能使将相同的菜单添加到一堆页面比 copy/pasting 将所有菜单的 li 和 ul 都添加到每个页面更容易？我正在建设的网站将有数百页。如果可能的话，万岁，如果我能让它更容易和更快地做到这一点！

如果可能...我该怎么做？

Answer 1

使用Jquery

menu.html

<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>

some_other_content_page.html

<html> 
  <head> 
   </head> 
<body> 
     <div id="includedContent"></div>

    //some_other_content_page.html content

 <script src="jquery.js"></script> 
    <script> 
 $(function(){
      $("#includedContent").load("menu.html"); 
    });
    </script> 
  </body> 
</html>

Download Jquery

.load() documentation

Answer 2

我会给你的菜单命名 menu.php 然后你可以在下面做。这对我总是有效，您始终可以在任何单独的幻灯片或画廊或任何您真正想要插入特定页面的内容上执行此操作。

<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>

<div class="navigation_div">

<--THIS IS WHERE YOUR MENU GO-->
          <?php include 'menu.php';?>
</div>

<div class="content_div">content stuff here</div>
</body>
</html>

显示带有自定义 css 标签的 html 文件？

Display an html file with a custom css tag?

css

file

hyperlink

menu

src