I have tried numerous suggested jquery codes, finally found one that almost works.
But it has a flaw - after clicking on a link - link goes un-highlighted for a second (as long as page loads) and THEN turns active. Is it possible to get link highlighted instantly after clicking before page has done loading php/html?
It would be great to find jquery or javascript solution because of the animation possibilities? What´s the common way to make website/homepage menu´s dynamic?
Thanks in advance! All the explanation or code-examples would be just plain great!
HTML:
<DOCTYPE! html>
<html>
<head>
<title>TESTLEHT</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="naviwrap"><?php include("includes/menu.php"); ?></div>
<div class="clear"></div>
<div class="content"></div>
<div class"footer"><?php include("includes/footer.php"); ?></div>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
included menu file:
<nav class="menu">
<ul class="clearfix">
<li id="linkone" class="jlist" data-linkid="link1"><a href="index.php">Avaleht</a></li>
<li id="linktwo" class="jlist" class="current-item" data-linkid="link2"><a href="meist.php">Meist</a></li>
<li id="linkthree" class="jlist" data-linkid="ink3"><a href="tooted.php">Tooted</a></li>
<li id="linkfour" class="jlist" data-linkid="link4"><a href="galerii.php">Galerii</a></li>
<li id="linkfive" class="jlist" data-linkid="link5"><a href="kontakt.php">Kontakt</a></li>
</ul>
</nav>
css: .menu a { transition: all linear 0.30s; color: #ABABAB; font-size: 16px; text-decoration: none; }
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: red;
}
.menu li:active > a, .menu .current-item > a {
color: red;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 105%;
}
.menu > ul > li > a {
padding: 15px 45px;
margin-top: 15px;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
color: #282828;
}
current jquery code, which almost works:
$(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.current-item').removeClass('current-item');
$(this).parent().addClass('current-item');
}
});
});
That seems like normal behaviour for a webpage. People know things go a little funky when a page is loading.
If you want to get fancy with how pages transition, you gotta look into Single Page Applications (SPA), which usually means when you click a link only a part of the page loads - this is done using Ajax. It can be as simple as a custom jQuery script to do it, or using a larger framework like Angular or Backbone, or a smaller one like Sammy JS.
There are also premade jQuery scripts like jQuery SmoothState, where you don't need to worry about making partial pages. SmoothState will delay the loading of the next page as it secretly loads and examines the next page, and only change the areas of the page that are different. It supports animated page transitions, as well as preloading the 'next' page (sooner than a mouseup event on the link) to make things seem a little faster.
https://en.wikipedia.org/wiki/Single-page_application
http://miguel-perez.com/articles/add-page-transitions-with-smoothstate/