Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Aktiivisen linkin/linkkien korostus

Onni [31.08.2016 12:08:48]

#

Moro!

Yritin jo etsiä jotain valmista scriptiä tämän toteutukseen mutta ei löytynyt mitään käypää... Eli sivustollani on Bootstrapin "perus" navigointi hieman muokattuna ja tarkoituksena olisi saada sekä pudotusvalikon otsikko että pudotusvalikon aktiivinen linkki korostettua, eli käytännössä kai lisättyä molempiin jokin CSS-luokka. Miten ja millä tämä onnistuisi helpoiten?

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-12 navilaatikko">
		<nav class="navbar navbar-default paanavi">
		<div class="container-fluid">
		<div class="navbar-header">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<span class="sr-only">Avaa navigointi</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
		<div class="navbar-brand visible-xs">www.Domain.com</div>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
		<ul class="nav navbar-nav navbar-right">

<!-- UUTISET -->
			<li><a href="#">Ylätason linkki 1</a></li>

<!-- KIERTUE -->
			<li><a href="#">Ylätason linkki 2</a></li>

<!-- YHTYE -->
			<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ylätason otsikkolinkki <span class="caret"></span></a>
			<ul class="dropdown-menu">
			<li><a href="#">Alasivu 1</a></li>
			<li><a href="#">Alasivu 2</a></li>
			<li><a href="#">Alasivu 3</a></li>
			</ul>
			</li>

		</ul>
		</div><!--/.nav-collapse -->
		</div><!--/.container-fluid -->
		</nav>
		</div>
	</div>
</div>

groovyb [01.09.2016 11:54:13]

#

Yleensä active -luokka lisätään serverillä oikeaan elementtiin riippuen siitä millä sivulla ollaan (tai keksillä javascripin kautta).

tässä kuitenkin yksi esimerkki, jota voi soveltaa esimerkiksi single page -ratkaisussa, jossa koko verkkosivusto on samalla sivulla.

JSFiddle

Onni [01.09.2016 21:24:49]

#

Tällainen löytyikin jo pitkällisen etsinnän jälkeen, ja vaikuttaisi toimivan. Hetken aikaa sai kyllä pähkäillä kun ei tuo Javascripti ole niin tuttua...

https://www.youtube.com/watch?v=dRLOHxyCaGU

Kiitos kuitenkin. :)

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta