I have an html navigation bar with three options available (homepage, page 1 and page 2). I don't want endlessly clicking on hyperlinks to open up endless tabs in the history. I'd rather have at most all three tabs open in my story, or the homepage plus the last page opened.
I've tried working with window.location.replace but it doesn't seem to work.
I attach the html code of my navbar:
<nav class="menu">
<ul>
<li><a onclick="document.location='index.html'">Home</a></li><!--
--><li><a onclick="document.location='educazione_civica.html'">Educazione Civica</a></li><!--
--><li><a onclick="document.location='materie.html'">Materie</a></li1>
</u>
</nav>
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.
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.
I have built this website so far in Wordpress.
I created the navigation links on the left manually by entering this code in the Wordpress Left Sidebar widget:
<ul>
<li><h5><a class="page page-id-35 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=35/" >This is page 1</a></h5></li>
<li><h5><a class="page page-id-39 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=39/">This is page 2</a></h5></li>
</ul>
The long class names that you see there I got them by looking at the source code for each of the two pages.
Then, in the CSS stylesheet, I added this:
.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right,
.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right
{
background:red;
color:white;
}
I was expecting the links on the left to be highlighted when their corresponding page was loaded on the browser. The pages load fine, but there is no highlighting. Anyone knows what I am doing wrong? Or is there any other technique to highlight the navigation menu for the current page?
I have used bootstrap nav nav-pills nav-justified
and i have 7 of these
<li>Form</li>
I have been able to click on form which will re-direct to the form page, but I can't seem to return to my home page without clicking back on the browser. I want to be able to just click on the Home button which i've included as part of my 7 <li>s I mentioned earlier. Also i would like to be able jump onto each page from the navbar tab.
<div class="header">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li><a href "#">Home</a></li>
<li><a href "#">About</a></li>
<li><a href "#">JavaScript</a></li>
<li><a href "#">JQuery</a></li>
<li>AngularJS</li>
<li><a href "#">API</a></li>
<li>Form</li>
<li><a href "#">Contact</a></li>
</ul>
</div>
</div>
So from that above, when i click on form, im on the form page, but i cannot go back to the homepage(index.html) unless i click back on the browser, i wanna be able to link to all the lists by clicking each other.
Consider using Ajax to load different pages dynamically (with association with jQuery it said to be simpler to use) for the desired behavior or put everything on the single page and show content only when user clicks the link by JS and CSS.
As soon as you use Bootstrap elements you probably have jQuery already included in your project.
Useful links:
jQuery Ajax
Hiding elements with CSS
Check this page jQuery.get there is a very demonstrative example
$.get("demo_test.asp", function(data, status)
{
alert("Data: " + data + "\nStatus: " + status);
});
where data - data received from the server. It should be your html code to replace the content.
To insert data use:
$.('#Content').html(data); //id="Content" is from the comment
if you do this in a local host and you created these files as i find out when you click on the home you get 404 page the only thing that you have to do is to link your homepage file to the home button if i'm wrong comment me and explain your problem more and then i will help you.
I have just installed a bootstrap theme and want to link one of the page titles to an external site. This is the section of the code that I can see where the page is. Can anybody help me bounce this title to an external URL?
<li class="">Release Notes</li>
<li class="">Google</li>
Bonus: to open in a new tab, use target="_blank"
<li class="">Google</li>