Adding click function to css dropdown

Site Link

I have some issue to be fixed regarding this.

View Live demo/ View details is coming from this code →

<div class="viewdemo">
	<a href="" class="anchor_button3">View live demo</a>
	<a href="" class="anchor_button4">View details</
</div>

I want that initially, this should not show, and this is doable by putting display: none, but on hover over that big box I want this div to be shown. I am unable to think how w/o using javascript, but is there any alternative by which we can do this w/o using Javascript.

At the simplest level you could do this:

.viewdemo{display:none}
.themeshow:hover .viewdemo{display:block}

Of course the box will then increase in size when the viewbox shows. If you don’t want the jump in size then use visibility:hidden and visibility:visible instead of display:none/block. The problem with this approach is that there will be a gap at the bottom of the box when it is hidden. It may therefore be better to absolutely place the viewdemo in the middle of the box on hover.

Something roughly like this:

.themeshow {
	position:relative;
}
.viewdemo {
	position:absolute;
	left:-99em;
	opacity:0;
	height:6em;
	background:rgba(255,255,255,0.3);
	transition:opacity .5s ease;
}
.themeshow:hover .viewdemo {
	opacity:1;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	text-align:center;

}

1 Like

Sir,

I tried both of your solutions. I find something on codepen →

This also seems to be an additional alternative but that is using SCSS that I do not know. can we achieve this through pure CSS?

on the codepen if you click the ‘view compiled’ it will show you the css output. SCSS outputs css but allows you to put certain operators into the code for example you might want the same colour on numerous different classes so rather than have to write the color into each class you can set a variable for color and apply it to all. Then if you want to change the color you can just change the one variable and it changes throughout the css.

2 Likes

As Noppy said just click the arrow in the right of the CSS panel and you can select ‘View Compiled CSS’ and copy the css as required. Browsers only understand CSS and things like SCSS are a pre-processor (supposed) to make life easier. In the end the output is raw csss.

However, there is nothing different in that demo that can’t be accomplished using the techniques I have already given you. It’s just a different layout that’s all and you’d need to style accordingly. The technique for hiding and showing is essentially the same.

2 Likes

Hi there codeispoetry,

You may find this attachment mildly interesting. :winky:

theme-example.zip (53.0 KB)

coothead

2 Likes

Nice sir. :clap::+1:

 
 
            I am pleased that I was able to entertain you. :winky:
 
 
            coothead

3 Likes

You are very nice, helpful, and very supportive. Thanks!

2 Likes

I wanted to build a menu like this →

But I do not have a polish to build it on my own. so i was looking for solutions on the web and found one that is very close to what I want.

Demo Here : Demo 2

and its code is here. → Example #2
But it has lot of CSS written. Is it Authentic?. I mean is this code high quality and we can confidently move forward or it has too much CSS and the objective can be achieved by little CSS than the amount of CSS written here.

Can some one please help/advise me.

The Codrops articles are generally good value and well written and if you are already using jquery then there is no extra overhead. The css can always be slimmed down but a lot of the css will be general styling etc anyway,

There are accessibility issues with dropdown menus so it is important to decide whether you have to have one or not? I would also avoid the hover menu types of dropdowns (even though they work with css only) because they are hard to navigate for the mobility impaired and seldom work well for touch devices so a click dropdown is a better option even if it does require js to work.

1 Like

Thanks. I got your point regarding the importance of mobile-ready. I think the example 2, which I am trying to include in my work is also using vanilla JS. see the snapshot here →

So I think as you have advised (what I have quoted above) it is good to go with this kind of option. Right sir?

They are all using the jquery library which you can usually tell when you see the $ symbol used like so:

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

‘toggleClass’ is also a jquery function.

If you want vanilla JS then I’m sure one of the JS forum experts could convert the code to vanilla JS for you. I suggest that if you like that menu then you copy all the relevant details into a codepen and get it up and running with jquery and once working make a post in the JS forum pointing to the codepen and ask for hints on converting to vanilla JS. It looks as though its only swapping classes so should be a relatively easy exercise.

Make sure the codepen is just a codepen for the menu and not part of some complicated wordpress page as you need ot get the menu working in isolation first so that you can debug and change easily. :slight_smile:

1 Like

Sir,

70% is the copy paste from the source discussed above. I have slightly changed some CSS.

Mine is not even working.

You haven’t linked to the query library which you can do from the settings in code pen.

You also missed the main snippet of js.

$(function() {

		var dd = new DropDown( $('#dd') );

		$(document).click(function() {
			// all dropdowns
			$('.wrapper').removeClass('active');
		});

	});
1 Like

I implemented so basically this is javascript →

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            event.stopPropagation();
        }); 
    }
}

and this is JQuery →

$(function() {

		var dd = new DropDown( $('#dd') );

		$(document).click(function() {
			// all dropdowns
			$('.wrapper').removeClass('active');
		});

	});

I may sound foolish, but I wanted to be clear. Thanks!

You’ve changed the codepen back to use jquery and it now works ok.

I assume you were trying to use vanilla JS but you left in place a few bits of jquery (as already mentioned).

I’ve converted it to vanilla ja for you but my js is very basic so I’ll move this thread to the JS forum so someone else can point out better ways to do it.:slight_smile: (I’m assuming you could just use the one event listener and test which element was clicked and act accordingly.)

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

Note the version above is just for one dropdown on the page and if you had multiple dropdowns you would need to change the page.

1 Like

Can you Please confirm this code is JQuery of Vanila Javascript →

I think it is vanila JS.

It looks like a combination of both ‘vanilla’ JavaScript and jQuery

1 Like