I own a website at https://shadowdragonp.github.io/ using a somewhat well-known template called "Squadfree."
On the navigation bar, there are your typical buttons, such as "home", "about", "contact", etc. However, there is also a drop-down menu (not hyperlinked) called "Portals" that takes you to various sub-directories. Although the navigation bar changes depending on the sub-directory, the "portals" menu will always be the same on every page.
The "portals" menu will include more items on the list as time goes on. I do not want to edit all of the pages when I add an item to the portal menu, so I am looking for a way to possibly reuse code for the HTML. All suggestions are welcome!
<li class="dropdown">
Portals <b class="caret"></b>
<ul class="dropdown-menu">
<li>Music</li>
<li>Games</li>
<li>Software</li>
<li>Image Gallery</li>
</ul>
</li>
Add a new html file to a directory something like PortalSubMenu.html. write the code you want to reuse inside of this newly created html document. In your case its gonna be the code your wrote above. Now assign an Id to your navigation bar lets say id="menu". Once done write the following script just before the ending of body tag ''.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//wait until the dom is fully loaded
$(document).ready(function () {
//adds PortalSubMenu.html content into "#menu" element
$('#menu').load('PortalSubMenu.html');
});
</script>
Don't forget to remove the Portal navigation drop down from man page as this will be coming from separate source. For more info take a look at this Stack Overflow thread Link
I hope you will achieve what you are looking for but I still recommend you to use some server side rather then plain html. because in that case you will generally have a master page or Layout page where you can define things that will stay same across your websites.
Related
the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Tutorial</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I have the above nav bar in my website, which includes couple pages.
The thing is, whenever I create new page, I manually have to enter all nav bar stuff over and over again.
So was wondering, if there are any sort of template I can wrap my nav, and use that template for other pages, so I just need to change the one template file, instead of changing whole stuff in each pages.
I found sth called template tag, but not sure how I'm suppose to use it.
You can do this using jQuery. Create separate page for NAV. Ex: header.html.
Then include your header nav in header.html page. Then create and 'id' in the page you want to get the menu. Here I am using a div that id called main-menu. Then using jQuery you can add your html menu to relevant page.
$("#main-menu").load("header.html");
Here is a code snippet. Use loading script always below the jQuery.
// Get nav to the page
$('#main-menu').load('header.html');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu"></div>
Quick and easy way would be to save that code as something like header.html and then inlcude it in all the other pages. Which can be done using jQuery or JavaScript, see this SO question for how.
Can someone please offer me some advice?
I'm trying to customise a website and its HTML Nav Menu. By default, the menu already highlights the current tab for all existing pre-built pages.
http://webservices.retrotorque.com
I've added a new page to the website - Website Design - and I've added a tab to the menu for that page. All fine. But I can't find a way of making that tab become highlighted for only when that page is viewed.
Here is the existing code for one of the default tabs, which works fine.
<li class="first <#tag:homesection /#>">
Home
Here's my code for the menu tab I've created for my new page:
<li class="levelone <#tag:webdesignsection /#> ">
Website Design
<li>
My problem is that I can't find where to define:
<#tag:webdesignsection /#>
So I may need to find another solution.
I've thought of another approach:
<li class="levelone active">
Website Design
<li>
This code does work, but only in so much as the tab is always highlighted, whichever page is being viewed.
Is there a way of wrapping this up in a 'conditional'? So that it only applies when viewing the websitedesign page. And I could have a non-active alternative, conditionally set up for when viewing any of the other pages.
Thanks.
i think you should put JQuery there that can addClass and removeClass active from li element.
there is for example
var url = document.URL;
$('#example li a[href="'+url+'"]').parent().addClass('active');
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.