Šesti čas – Linkovi II – sidra

Dragan Filipović Korak po korak, Kurs Comments (0)

Imenovana sidra

Ova vrsta linka vodi do određenog mesta na strani u okviru vašeg sajta. Sastoji se iz dva dela: imena (Name anchor) i linka do tog imena (anchor).

1. Ime postavljate na mesto gde vaš link treba da vodi, stavite kursor na to mesto , i ime ubacite sa Insert — Named Anchor, ili preko ikone Sidra u insert panelu . Sidro treba biti iznad mesta koje želimo da prikažemo, obzirom da je sidro mesto koje se pri upotrebi lepi za gornji deo ekrana.

<a name=”mestosidra” id=”mestosidra”></a>

U Design delu se pojavljuje mala žuta sličica sidra.

2. Link ka sidru je u formatu

<a href=”#mestosidra”>Kliknite ovde</a>

 odnosno u polju za link ubacite simbol # pa ime sidra (bez razmaka). Ukoliko želite link ka određenom delu neke druge strane format je sledeći:

<a href=”druga_strana.html#ime_sidra”>Kliknite ovde</a>

 

Sidra se uglavnom koriste za strane sa puno teksta, kako bi olakšali vraćanje na vrh strane (npr Nazad na vrh ) ili pri izradi Sadržaja.

Veoma popularni sajtovi su tzv. One page sajtovi. Ovakvi sajtovi se prave uz pomoć sidra. U okviru jedne strane naprave se sve ostale strane, odnosno ređaju se jedna ispod druge., a povezuju se pomoću sidra.

Pogledajte primer: Sidra – One page site.

<body>
<div class="navigacija">
  <ul>
    <li><a href="#home1">Home</a></li>
    <li><a href="#about1">About</a></li>
    <li><a href="#galerija1">Galerija</a></li>
    <li><a href="#kontakt1">Kontak</a>t</li>
  </ul>
</div>
<div class="okvir">
<div class="sidro"> 
<a id="home1"></a><p>medju prostor gde stavljamo sidro</p>
</div>
<div class="home kocka">class "home"</div>
<div class="sidro"> 
  <p><a id="about1"></a></p>
  <p>medju prostor gde stavljamo sidro</p>
</div>
  <div class="about kocka">class "about"</div>
<div class="sidro"> 
  <p><a id="galerija1"></a></p>
  <p>medju prostor gde stavljamo sidro</p>
</div>  
  <div class="galerija kocka">class "galerija"</div>
<div class="sidro"> 
  <p><a id="kontakt1"></a></p>
  <p>medju prostor gde stavljamo sidro</p>
</div>  
  <div class="kontakt kocka">class "kontakt"</div>
</div>
</body>

 CSS:

body {
 	overflow:hidden;
	margin:0;
	padding:0;
}
.navigacija {
	position:fixed;
	left:0;
	top:300px;
}
.navigacija ul li {
	list-style: none;
}
.okvir {
width:800px;
margin:0 auto;	
}
.sidro {
}
.kocka {
	height:400px;
	margin-bottom:800px;
	margin-top:250px;
	text-align:center;
	line-height:400px;
	font-size:72px;	
}
.home {
	background-color:#00CC99;
}
.about {
	background-color:#CCCC00;
}
.galerija {
	background-color:#FFCC00;
}
.kontakt {
	background-color:#0066FF;
}

 JS – za smooth scroll:

	$(function() {
	
		function filterPath(string) {
			return string
			.replace(/^\//,'')
			.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
			.replace(/\/$/,'');
		}
	
		var locationPath = filterPath(location.pathname);
		var scrollElem = scrollableElement('html', 'body');
	
		// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
		$('a[href*=#]').each(function() {
	
			// Ensure it's a same-page link
			var thisPath = filterPath(this.pathname) || locationPath;
			if (  locationPath == thisPath
				&& (location.hostname == this.hostname || !this.hostname)
				&& this.hash.replace(/#/,'') ) {
	
					// Ensure target exists
					var $target = $(this.hash), target = this.hash;
					if (target) {
	
						// Find location of target
						var targetOffset = $target.offset().top;
						$(this).click(function(event) {
	
							// Prevent jump-down
							event.preventDefault();
	
							// Animate to target
							$(scrollElem).animate({scrollTop: targetOffset}, 800, function() {
	
								// Set hash in URL after animation successful
								location.hash = target;
	
							});
						});
					}
			}
	
		});
	
		// Use the first element that is "scrollable"  (cross-browser fix?)
		function scrollableElement(els) {
			for (var i = 0, argLength = arguments.length; i <argLength; i++) {
				var el = arguments[i],
				$scrollElement = $(el);
				if ($scrollElement.scrollTop()> 0) {
					return el;
				} else {
					$scrollElement.scrollTop(1);
					var isScrollable = $scrollElement.scrollTop()> 0;
					$scrollElement.scrollTop(0);
					if (isScrollable) {
						return el;
					}
				}
			}
			return [];
		}
	
	});

 Nazad na vrh dugme

Zadatak:

Napraviti fiksirano okruglo dugme – nazad na vrh, u desnom donjem uglu ekrana.

CSS:

.nazad-na-vrh {
display:block;
width:80px;
height:80px;
border-radius:40px;
background-color:green;
color:white;
text-align:center;
line-height:80px;
text-decoration:none;
position:fixed;
right:50px;
bottom:50px;
-webkit-box-shadow:red 0 0 10px 4px;
-moz-box-shadow:red 0 0 10px 4px;
-o-box-shadow:red 0 0 10px 4px;
box-shadow:red 0 0 10px 4px;
-webkit-transition:all 0.8s ease-in-out;
-moz-transition:all 0.8s ease-in-out;
-o-transition:all 0.8s ease-in-out;
transition:all 0.8s ease-in-out;
}
.nazad-na-vrh:hover {
background-color:green;
color:white;
-webkit-box-shadow:inset red 0 0 10px 4px;
-moz-box-shadow:inset red 0 0 10px 4px;
-o-box-shadow:inset red 0 0 10px 4px;
box-shadow:inset red 0 0 10px 4px;
}

 HTML

link postavljamo na dno sajta, van okvira – glavne tabele, obzirom da je fiksne pozicije.

<a class="nazad-na-vrh" href="#top">top</a>

 Mesto – ime sidra – postavljamo na vrh sajta, odmah posle body taga.

<a name="top" id="top"></a>

 Pogledajte vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.