Highlighted

hamburger memu

Engaged ,
Jun 25, 2019

Copy link to clipboard

Copied

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.

Q_Dw_30_hamburger.png

Message was edited by: Ben Pleysier to call out osgood_

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;

}

Views

207

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

hamburger memu

Engaged ,
Jun 25, 2019

Copy link to clipboard

Copied

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.

Q_Dw_30_hamburger.png

Message was edited by: Ben Pleysier to call out osgood_

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;

}

Views

208

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 25, 2019 0
LEGEND ,
Jun 25, 2019

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 2
Engaged ,
Jun 25, 2019

Copy link to clipboard

Copied

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

Q_Dw_31_hover.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
LEGEND ,
Jun 25, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 3
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

I use all 3 for better accessibility.

a:hover,

a:active,

a:focus  {  }

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 2
Engaged ,
Jun 25, 2019

Copy link to clipboard

Copied

A larger image to the previous question.

Hosun Kang

Q_Dw_31_hover.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2019 2