Jump to content

w3 framework menu close animation


JohnDahl

Recommended Posts

I have been debating whether to use a canned framework or not (versus raw css) and am still on the fence. Twitter bootstrap seemed bloated to me when I tried it, so today I played around with w3's framework. It's nice, but I feel like I have ZERO control (or at least I can't control it....).

The example framework I kicked around a while is this one:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio&stacked=h

The thing I HATE is how the side menu pops up automatically when the window is enlarged. So I just spent literally two hours trying to figure out how to keep this from happening, and failed.

Viewing the source in firefox (via F12) I can see the container change with a "before" keyword popping up, but HOW? Is there a way to change this behavior?

Link to comment
Share on other sites

I figured out the problem. After fighting through html, css, SQL and php tutorials, manuals, etc. I lost patience (sometimes this learning curve feels never-ending). Today I going through the ws.css reference a little at a time, studying examples.

I still don't know why that sidebar pops out, but right now I don't care. That comes later.

 

Link to comment
Share on other sites

Have you had a look at Media Queries? I had a look on the website you linked, and if you investigate the styling on THIS element

<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">

You'll find a media query that controls the sidebar. Having my screen maximised shows this style currently active upon it.

@media (min-width: 993px)
.w3-sidebar.w3-collapse {
    display: block!important;
}

This shows it from its hidden state, if the screen has a width of 993px or more.

When I reduced the screen size, the active CSS changed to this instead.

@media (max-width: 992px)
.w3-sidebar.w3-collapse {
    display: none;
}

This hides the sidebar should the screen be less than 992px wide.

I'm not brushed up on the :before and :after elements, so I wouldn't be able to answer that.

 

If you wished to look at these styles in the source:
w3.css, Line 793
w3.css, Line 805.

 

If you look around for these things in particular, you'll find a lot of other things are controlled by the screen size too

 

Feel free to ask any further questions.

Edited by Funce
Link to comment
Share on other sites

On 8/29/2018 at 3:54 AM, Funce said:

Have you had a look at Media Queries? I had a look on the website you linked, and if you investigate the styling on THIS element


<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">

You'll find a media query that controls the sidebar. Having my screen maximised shows this style currently active upon it.


@media (min-width: 993px)
.w3-sidebar.w3-collapse {
    display: block!important;
}

This shows it from its hidden state, if the screen has a width of 993px or more.

When I reduced the screen size, the active CSS changed to this instead.


@media (max-width: 992px)
.w3-sidebar.w3-collapse {
    display: none;
}

This hides the sidebar should the screen be less than 992px wide.

I'm not brushed up on the :before and :after elements, so I wouldn't be able to answer that.

 

If you wished to look at these styles in the source:
w3.css, Line 793
w3.css, Line 805.

 

If you look around for these things in particular, you'll find a lot of other things are controlled by the screen size too

 

Feel free to ask any further questions.

I could not figure out SPECIFICALLY what was causing the menu to auto-popup - I know a media query is what is generally doing it, but since I am not very good with media queries I could not figure out exactly what is causing the action - such that I could delete the offending css property to stop the behavior.

In the meantime I moved on and am approaching this from another angle: slowly and methodically.

Link to comment
Share on other sites

IF you mean the menu auto-popup as in animates from left it is caused by this line

.w3-animate-left {
    animation: 0.4s ease 0s normal none 1 running animateleft;
    position: relative;
}

To disable that use

#mySidebar.w3-animate-left {
    animation: none;
    }

in a custom css file, that is linked to under the w3css css link

The ID #mySidebar will make sure it does not affect any other left animation elements using this class and most importantly being below w3css it will override the animation styling used by w3css file.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...