Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

[SUGGESTION] Menu header up-scroll animation

Featured Lock Resolved Task
Hello, actually I am a fan of sticky menus. But on smaller screens the menu/header should have an option to appear more dynamically. I am talking of an "up-scroll" effect. If you scroll-down the header hides temporarily... when you scroll-up the header shows again. Here is an example menu module and effect. (scroll down and up to see it in action)

Possible to have this as an optional feature in HELIX3?
Thanks for reading.

7 Answers

Alex Smirnov

More than a month ago #Permalink
Hi mate,

Many thanks once again for your overflowing ideas and suggestions. I will refer this to our team.

From my personal view, considering that internet is moving rapidly to mobile devices, there is no much sense in investing design and development efforts and resources into JS effects, which 40% of site visitors won't see on their small devices. But thank you once again anyway.

Regards,

Alex

pepperstreet

More than a month ago #Permalink
Alex Smirnov wrote:
From my personal view, considering that internet is moving rapidly to mobile devices, there is no much sense in investing design and development efforts and resources into JS effects, which 40% of site visitors won't see on their small devices.


Partly agree. Times and technology is so fast these days, I think allmost any device will support JS. Only way to get x-browser compatibility.
Besides it is not just a simple eye-candy effect, it is about usability, UX and saving screen estate.

Syed H

More than a month ago #Permalink
I was able to partially achieve this by adding the following code under custom css:

header#sp-header {
font-size: 15px;
position: fixed;
top: 35px;
left: 0;
right: 0;
width: 100%;
background-color: rgb(26, 188, 156);
z-index: 9999999;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
direction: ltr;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

#sp-header.menu-fixed {
border-bottom: 1px solid #ccc;
top: -60px !important;
opacity: 0 !important;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
box-shadow: 0 0 6px 2px rgba(0,0,0, 0.1);
}


May be someone can extend this further to make it appear just as the demo shared initially.

Regards,
Syed H

Alex Smirnov

More than a month ago #Permalink
@Syed,

Cheers for your CSS snippet. Hopefully, someone will be able to build upon it.

@pepperstreet,

Thanks once again, mate.

Regards,

Alex

pepperstreet

More than a month ago #Permalink
Syed Shah Zahurullah Hussaini wrote:
I was able to partially achieve this by adding the following code under custom css...


Hello Syed, I can't see any effect. What should your CSS do? What should I see. Can you explain, please.

nakyfo

More than a month ago #Permalink
I was able to partially achieve this by adding the following code under custom css:

header#sp-header {
font-size: 15px;
position: fixed;
top: 35px;
left: 0;
right: 0;
width: 100%;
background-color: rgb(26, 188, 156);
z-index: 9999999;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
direction: ltr;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

#sp-header.menu-fixed {
border-bottom: 1px solid #ccc;
top: -60px !important;
opacity: 0 !important;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
box-shadow: 0 0 6px 2px rgba(0,0,0, 0.1);
}


May be someone can extend this further to make it appear just as the demo shared initially.

Regards,
Syed H


Thanks!!


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 116
Toufiq

Toufiq

Total Accepted Answers: 82
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 71
Ofi Khan

Ofi Khan

Total Accepted Answers: 43
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 37

121

Templates

315321

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us