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.
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.
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.
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.
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.
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.
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 →
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.
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. (I’m assuming you could just use the one event listener and test which element was clicked and act accordingly.)