hamburger memu

[Hosun]

Hi,

Long ago, I got scripts.js from osgood_ for Roar Cycles 4. 

I applied the same js to Hosuns Portfolio 4 with the change in line 5.

But it doesn't work.

Would you help me?

Roar Cycles 4

Hosuns Portfolio 4

Hosun Kang

In the beginning, I wrote.

$('.menu-toggle').click(function(){

            $('.site-nav').toggleClass('site-nav--open');

            $(this).toggleClass('open');

})

But osgood's version makes the menu spread out more smoothly.

Message was edited by: Ben Pleysier to call out osgood_

[osgood_ · Accepted solution]

In your 500px media query.

Change this:

.site-nav {

background-color: darksalmon;

width: 100%;

height: 0px;

overflow: hidden;

}

To this:

.site-nav {

background-color: darksalmon;

width: 100%;

display: none;

}

[Hosun]

Hi,

Thank you very much for your reply.

I have another different question.

Long ago, I exchanged Q&A below.

In my work, I just put in "hover" only.

Hosuns Portfolio 4

What is the best combination, USUALLY?

1. hover

2. hover+focus

3. hover+active

Hosun Kang

[osgood_]

I only use hover. I don't use focus and active, other developers will have a different workflow.

[Nancy OShea]

I use all 3 for better accessibility.

a:hover,

a:active,

a:focus  {  }

[Hosun]

A larger image to the previous question.

Hosun Kang

[Jon Fritz]

I agree with Osgood here, "Best" is pretty subjective. I find it "best" to use a:link, a:visited and a:hover in my projects.

As long as the ones you decide to use are in the correct order...

a:link

a:visited

a:hover

a:active

If any of these are in the wrong order, you'll get unexpected results on your site.

a:focus is not part of the "must be in the right order" group, but can be a helpful tool if you need to cater more to keyboard navigation.