Maintain the Hover effect when clicking on the link (active)

Asked

Viewed 2,739 times

1

I have a <aside> and within it a structure ul>li (menu) according to the code below, I would like that when clicking on the item and the page of the same one is redirected, the menu is selected the same with the effect of the Hover and the + signal is - ...

I tried using css :target but it didn’t work out because I would have to use #nome-page and ended up not rolling .. then wanted to know via jquery what better way to do ... follows the code and image ... 

@import "../main";

.aside
{
	width: 100%;
	max-width: 290px;
	position: relative;
	margin-top: 90px;
	padding-right: 15px;
	float: left;
	
	.aside-bg
	{
		background-color: #cac5b0;
		max-width: 275px;
		width: 100%;
		padding: 15px 0 10px 0;
		margin-bottom: 30px;
	}
	.aside-bg:last-child
	{
		padding: 15px;
	}
	.aside-bg:last-child ul li 
	{
		width: 100%;
		background-color: #fff;
		padding: 10px;
		&:hover
		{
			background-color: #fff;
		}
	}
	.aside-bg:last-child ul li a
	{
		font-family:'Optimist';
		@include font-size(22);
		color: #061f5c;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.aside-bg:last-child ul span
	{
		padding: 10.5px;
		color: #fff;
	}
	.aside-bg ul 
	{

	}
	.aside-bg ul li
	{
		width: 105%;
		background-color: #061f5c;
		padding: 18.5px;
		margin-bottom: 25px;
		position: relative;
		&:hover
		{
			background-color: #ff5800;
		}
	}
	.aside-bg ul li:target
	{
		background-color: #ff5800;
	}
	.aside-bg ul li:last-child
	{
		margin-bottom: 0;
	}
	.aside-bg ul li a 
	{
		font-family:'Optimist';
		@include font-size(24);
		color: #fff;
		text-decoration: none;
	}
	.aside-bg ul li a span
	{
		position: absolute;
		top: 0;
		right: 0;
		padding: 19px 25px;
		background-color: #ff5800;
	}
	.aside-bg h2
	{
		font-family:'Optimist';
		@include font-size(35);
		color: #0a2677;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	.aside-bg img
	{
		margin-top: 25px;
		margin-bottom: 25px;
		width: 100%;
	}
}
<aside class="aside col-xs-12 col-sm-5 col-md-5">
	<div class="aside-bg">
		<ul>
			<li class="aside-link1"><a href="formags">A FORMAG'S <span>+</span></a></li>
			<li class="aside-link1"><a href="historia">NOSSA HISTÓRIA <span>+</span></a></li>
			<li class="aside-link1"><a href="tecnologias">TECNOLOGIAS <span>+</span></a></li>
			<li class="aside-link1"><a href="sustentabilidade">SUSTENTABILIDADE <span>+</span></a></li>
		</ul>
	</div>

	<div class="aside-bg">
		<h2>Não é só impressão</h2>
		<img src="assets/img/icon-aside.png" alt="Icones">
		<ul>
			<li class="aside-link1"><a href="formags">solicite seu orçamento<span>+</span></a></li>
		</ul>
	</div>
</aside>

inserir a descrição da imagem aqui

css html5 hover

  • I’ve never seen anyone make key inside the CSS key, as far as I know, it only works with media queries, (and Sass or Less before compilation)... In case it should be something like this: aside {...} aside.aside-bg {...} and not aside { .aside-bg{... } }

  • by nested CSS rules this looks SASS or LESS

  • @Ivanferrer Sorry maybe I didn’t mention but this is SASS

  • That’s what I figured, it’d be a SCSS

3 answers

1

In fact, this issue can be solved simply with CSS. Since you have specific pages for each link, on each of these pages you can place a class active link to the page. Then, in CSS, you could do the following:

.aside-link1 .active {
   /* Estilos que queira aplicar */
}
.aside-link1 .active span:after {
  content: "-";
}
.aside-link1 a span:after {
  content: "+";
}

With this, you could remove the "+" from each span you have on the pages currently.

EDIT:

Since the <aside> is a component you call on the pages, you will need to add the class active by Javascript. Follows a code snippet that does this:

var path = window.location.pathname;
if (path === "nome-da-pagina") {
  $('#idDoLink').addClass('active');
}

  • But the '<aside>' is shared, it is a component that I call on each page, even so it is possible? I will try here the way you said.

  • @Erick, then you will have to do as you commented in the other reply... take the url with Javascript and add this class active dynamically on the page. I will update the reply.

  • Cool understood, I tried here but a question arose, I’m testing on a local server, on the console.log(window.location.pathname) returns me '/site/public/page' .... however if I put this path in the 'path ===' returns me errors, now if I put in the path only the name of the page ai does not return error but I try here I think the path is this same, thank you very much.

  • @Erick, even if you share the <aside>, javascript will only run on the page you are on, it won’t stay fixed on the other pages. Mauritius' answer seems to answer your question.

0

Puts any class on the body of your page, a data-menu in the li of your menu and makes a Javascript similar to this:

$(suaUlDoMenu). each(Function(){ var menu = $(this). date('menu'); if($('body').is(menu)) { $(this). find(a:eq(0)). addClass('active menu'); });

For example. Your page has a class in the contact called body, and in the date-menu of your li you put contact TB. If hit it takes the "a" for read that hit and adds the menu-active class.

I did it here on the train, who can leave the reply formatted I thank rs.

0

It would not be the case to create a class (exe. active) pro link that contains the same effect as Hover and on the landing page you check which of the links should receive the such class?

  • So I’m not very good at js, but I was thinking of something like ... when entering the page js checks the url picks up the '/name-page ' there inside if it was going to check the page name and apply the effect in the corresponding li.. But I wanted an example or a hint if that’s where I should go. Try here something to add an active class but n worked very well in vdd did not work.

Browser other questions tagged css html5 hover

You are not signed in. Login or sign up in order to post.