Display an html file with a custom css tag?-CodePudding

I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:

// index.html

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

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

<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 >
<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 >

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

</div>

<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 >

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

</div>

<div >content stuff here</div>
</body>
</html>

Or can we do this with a <link src="menu.html" /> tag??? Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!

If it is possible...how would I do it?

CodePudding user response：

Use Jquery

menu.html

<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div >
<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

CodePudding user response：

I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.

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

<div >

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

<div >content stuff here</div>
</body>
</html>