Query: Targetting and Transitions using CSS3

[deldalton]

I’m trying to create an interactive navigation bar in a header at the top of a web page. The navigation bar spans across the whole page but its height is only 30px. There is a link in this navigation bar. The link has an image in it, and is set to change to a different image when hovered over. The link increases the size of the navigation bar height when clicked on.

How can I then have the navigation bar transition back to its original height, once the mouse has been removed from its space, or perhaps by clicking on the link again? I know that this can be done easily with JS with an IF statement to check the current size of the element. Is it possible any other way with CSS3?

HTML

CSS

nav {
background-color: #000000;
height: 30px;
width: 100%;
transition: height 0.5s;
-webkit-transition: height 0.5s;
overflow: hidden;
}

#navButton:hover{
background-image: url(images/lightNavDown.png);
width: 48px;
height: 48px;
}

nav:target {
height: 100px;
}

[Paulie_D]

Could you put this in Codepen with linked images?

I confess, I can’t see the point in increased the height of the nav, is there a reason for this?

Also, is there a reason the `href` goes to the nav?

[deldalton]

Paulie_D. The page is incomplete, so I appreciate why you may not be able to see the purpose of this yet.

Ultimately, the navigation bar will have links in it. They are hidden when the bar is 30px (using overflow: hidden, most likely). When the bar is expanded to the given size the links will then become visible.

The idea is that the navigation bar on this particular website isn’t overly important (but still needs to be easily accessible). The content that will take up the majority of the page is what I want people to see when they first load the page.

The reason the href targets the nav is so that the nav:target css is applied correctly.

I’ll see if I can get this into Codepen for you.

[Paulie_D]

>Ultimately, the navigation bar will have links in it. They are hidden when the bar is 30px (using overflow: hidden, most likely). When the bar is expanded to the given size the links will then become visible.

Sorry…I think that’s likely to be a bad user experience. Unless it’s blindingly obvious that I have to click to see the menu, I wouldn’t know it’s there.

Perhaps it will be but at the moment, I can’t see it.

>The reason the href targets the nav is so that the nav:target css is applied correctly.

Then I think you are using it incorrectly.

`nav:target` will apply the css to any nav element regardless…the href will attempt to move the page to that #ID.

[Paulie_D]

As it happens, rather than using `:target` I would just toggle a class on the nav with Jquery on click (or hover or both).

I can’t see any simple way of reverting back to the orgininal state using `:target`

[deldalton]

http://cdpn.io/hKlqr – Here’s your Codepen link.

If it isn’t obvious, it will not look that when I’ve finished. This is just a test. The button would, of course, be more obvious and would most likely be in the centre of the screen (horizontally). Additionally, for some reason, when Codepen generates it the image isn’t changing when you hover over it. But, it works on a normal preview.

I didn’t think it was possible either, with the :target pseudo but there’s a whole lot I don’t know yet.

It looks like I’ll have to use JS after all.

Thank you!

Oh, and you’re right about the nav:target … except I meant to use #nav:target which should only target elements with the id of “nav”.

[Paulie_D]

Here’s a quick JS version which will do most of what I think you are after.

http://codepen.io/Paulie-D/pen/mKpdr

Not the tidiest of code or efficient but others are much better at JS than I am.

[deldalton]

Paulie_D. Thank you for this. I’ll take a look at it.

I’ve marked this thread as solved now, and opened a new thread in the JS forum. You can find it here: https://css-tricks.com/forums/discussion/26903/query-js-style-width-if-statement#Item_1

[Author]

Posts