Jump to content

One menu for multiple web pages


Recommended Posts

I am working on a responsive web template css & html.

As I will be adding new web pages routinely, I would like to have an easy way to update the menu which is located

at the top of every .html page.

right now the menu on index.html looks like below

 

    <div class="collapse navbar-collapse navbar-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="active"><a href="index.html">Home</a></li>

                                    <li class="dropdown"><a href="#" >About <b class="caret"></b></a>
                                        <!-- submenu-wrapper -->
                                        <div class="submenu-wrapper submenu-wrapper-topbottom">
                                            <div class="submenu-inner  submenu-inner-topbottom">
                                                <ul class="dropdown-menu">
                                                    <li><a href="about-us.html">About Us</a></li>
                                                    <li><a href="about-me.html">About Me</a></li>
                                                </ul>
                                            </div><!-- /.submenu-inner -->
                                        </div> <!-- /.submenu-wrapper -->
                                    </li>

                                    <li class="dropdown"><a href="#" >Blog <b class="caret"></b></a>
                                        <!-- submenu-wrapper -->
                                        <div class="submenu-wrapper submenu-wrapper-topbottom">
                                            <div class="submenu-inner  submenu-inner-topbottom">
                                                <ul class="dropdown-menu">
                                                    <li><a href="blog.html">Blog Standard</a></li>
                                                    <li><a href="blog-single.html">Blog Single</a></li>
                                                </ul>
                                            </div><!-- /.submenu-inner -->
                                        </div> <!-- /.submenu-wrapper -->
                                    </li>

                                    <li class="dropdown"><a href="#" >Portfolio <b class="caret"></b></a>
                                        <!-- submenu-wrapper -->
                                        <div class="submenu-wrapper submenu-wrapper-topbottom">
                                            <div class="submenu-inner  submenu-inner-topbottom">
                                                <ul class="dropdown-menu">
                                                    <li><a href="portfolio-four.html">Portfolio Four Col</a></li>
                                                    <li><a href="portfolio-three.html">Portfolio Three Col</a></li>
                                                    <li><a href="portfolio-two.html">Portfolio Two Col</a></li>
                                                </ul>
                                            </div><!-- /.submenu-inner -->
                                        </div> <!-- /.submenu-wrapper -->
                                    </li>


                                    <li class="dropdown"><a href="#" >Pages <b class="caret"></b></a>
                                        <!-- submenu-wrapper -->
                                        <div class="submenu-wrapper submenu-wrapper-topbottom">
                                            <div class="submenu-inner  submenu-inner-topbottom">
                                                <ul class="dropdown-menu">
                                                    <li><a href="job-page.html">Job Page</a></li>
                                                    <li><a href="clients-page.html">Clients Page</a></li>
                                                    <li><a href="faq.html">FAQ Page</a></li>
                                                    <li><a href="typography.html">Typography</a></li>
                                                </ul>
                                            </div><!-- /.submenu-inner -->
                                        </div> <!-- /.submenu-wrapper -->
                                    </li>
                                    <li><a href="contact.html">Contact</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div><!-- /.container -->
                    </nav>

 

 

I would like to have the above menu in one file and then update the file whenever I make a new web page, for example on the About section which has two web page pages if

I wanted to include a third item (web page)

     <li><a href="about-me-again.html">About Me Again</a></li>

the I would like to make one change that will update the menu on all of the web site's pages rather than updating 100 web site pages!

 

I have seen a lot of old posts on this via Google searches - 7 years old or more - hoping forum users might have something new and effective that is super easy for a newbie to follow!

Edited by toasteroven
spelling
Link to comment
Share on other sites

Hi,

There are different ways to approach this, I would just use a server side include via PHP. It is old-school but it works. If you are using a coding program, a lot will have templates/snippets you can use within the program, to insert things like this automatically. But whenever you have a change to make, you have to use the code editor to apply the change to all your pages (which it can do automatically) and then you would upload the site again with every change.

With the server side PHP include route, once you create your include, all you have to do is update and upload the include file. We the PHP solution, of course you have to use PHP for you pages. Not hard though, but it would have to be done. 


Stef

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...