Adding click function to css dropdown

JavaScript
21

I already told you that $(this) is jquery and .toggleClass is also jquery :slight_smile:

1 Like
22

I think that the post is moved to the Javascript forum. I have few questions. can we achieve the current functionality of the menu only with the JQuery →

https://codepen.io/paulobrien/pen/zPgdLz

Additionally,

I want that the drop menu should appear looking like coming from upside Like this demo →

  2. Secondly, I want to create a border on all side when the drop down appears. just like the demo GIF image. I tried this on .wrapper after property → border 2px solid #000; but it didnt worked
  3. Thirdly, I want that CSS icons should appear rotating 360 degree when a drop down appears and disappear.

Can we do it in one case wit pure Vanilla JS and in once case with Pure JQuery?

23

Ok thanks.

24

I gave you an example of vanilla js for opening and closing the menu. The rest that you ask for is just mostly css styling. You add all the decorations, animations etc based on the class that was added.

It is a little awkward in CSS to do slide down effect because that only works on elements with fixed heights but you can do something a little similar.

e.g.

That is still vanilla js and just swapping a classname.

1 Like
25

Here’s another one using the same js but styled differently to give you an idea of what you can do.

1 Like
26

This is a bit smoother for the first version by messing about with the transitions and hiding mechanisms in css.

1 Like
27

Hi there codeispoetry,

here is my puny little attempt…

code-is-poetry.zip (2.1 KB)

…for you try. :wonky:

coothead

2 Likes
28

Nice :slight_smile:

(Its a shame CSS alone can’t do ‘auto height’ animations properly like your example. (I know there are some fixes but they are not perfect))

1 Like
29

Hi there Paul,

I think that my puny little effort looks better with javascript disabled.

To my mind, the main problem with modern CSS is that it now seems
to encourage the desire to create pointless “arty farty” nonsense. :rolleyes:

Hiding content, just because one can, is, in the majority of cases,
totally unwarranted and probably very aggravating to the users. :eyebrows:

My excuse though, is that I code this nonsense in the hope that the
exercise may help stave off premature senile dementia. :winky:

coothead

2 Likes
30

You Puny little efforts means a lot to a beginner like me. Thank you for support and modesty.[quote=“coothead, post:29, topic:283280”]
I think that my puny little effort looks better with javascript disabled.
[/quote]

I didn’t understand this. you mean this will work without the javascript also[quote=“coothead, post:29, topic:283280”]
Hiding content, just because one can, is, in the majority of cases,
totally unwarranted and probably very aggravating to the users.
[/quote]

Are you referring to this method →
content: "";

`[quote=“coothead, post:29, topic:283280”]
My excuse though, is that I code this nonsense in the hope that the
exercise may help stave off premature senile dementia.
[/quote]

Respect and love to you.

I feel blessed that I have such an outstanding learning with the Pro’s and pure souls like you.
Hats off → @coothead and @PaulOB and every one else.

31

It will display the menu in the open state if js is disabled. That means it won’t close it will be a static open menu at all times.

1 Like
32

With javascript disabled the result is like this…

…which, as a potential visitor to a site, I would personally prefer to see. :winky:

Although I code all this sort of stuff, I don’t necessary recommend it’s use. :unhappy:

Is there a practical reason for you wanting to hide content?

coothead

1 Like
33

No No! I was just asking.

34

I have implemented both the menu on the live website. One by Mr. Paul OB and another by Mr. Coothead.

@coothead sir,

Your menu is throwing the whole header down. which property should we consider changing so that this behavior is fixed?
Live Website Link

35

Hi there codeispoetry,

You would need to change this…

#continents {
    display: inline-block;
    padding: 0 0.75em 0.5em;
    margin: 0;
    border: 3px solid #06c;
    list-style: none;
    background-color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    color: #06c;
    overflow: hidden;
    transition: height 0.75s ease-in-out;
 }

…to this…

.wrap div:nth-child(3) {
    position: relative;
    min-width: 7.5em;
 }

#continents {
    position: absolute;
    padding: 0 0.75em 0.5em;
    margin: 0;
    border: 0.21em solid #06c;
    list-style: none;
    background-color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    color: #06c;
    overflow: hidden;
    white-space: nowrap;
    transition: height 0.75s ease-in-out;
 }

-coothead

1 Like
36

ActuallY, i tried position: absolute for the #continents, but I didn’t use this →

.wrap div:nth-child(3) {
    position: relative;
    min-width: 7.5em;
 }

#So this is the takeaway →
Parent element used relative position and child element uses absolute position.

Generally, I find positioning a bit subtle and complicated.

37

@PaulOB sir,

You taught me a trick based on which we can use shadow property to make it appear as if the row is stretching towards the extreme walls of the screen.

Is there any similar trick/technique using which w/o changing the layout we can stretch this image that appears below the →

“Get started Free” here.

38

But are you going to implement the amended CSS? :wonky:

coothead

39

I think I have already done. Please CTRL+F5

1 Like
40

Hi there codeispoetry,

I forgot to ask; what is this symbol…

…as I could only find this…

天

coothead

1 Like