How to slide toggle a pseudo element?

Question

As you can see in this jsfiddle, when you click the menu button, the little triangle that points to the button is only shown after the animation has finished. I'd like the animation to start with the pseudo element and only then proceed to the drop-menu element. How can I accomplish this?

A solution doesn't necessarily have to use javascript, CSS3 will be most welcome, I'm not worried about compatibility issues.

The `slideToggle` hides the element completely. What if you use jQuery to just toggle the `height` using `animate`? — ACJ, Aug 29 '12 at 01:02
possible duplicate of [Manipulating CSS :before and :after pseudo-elements using jQuery](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery), although you might be able to achieve this with a mix of *both* JavaScript and CSS3, but I'm not sure how far you can get. — BoltClock, Aug 29 '12 at 01:03
It's most certainly not a duplicate, but the answers to that question are pretty revealing of my ignorance. `pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with jQuery.` Thanks! — Ashitaka, Aug 29 '12 at 01:13

Zoltan Toth · Accepted Answer · 2012-08-30T13:23:06.897

4

You can try this - DEMO

.drop-menu {
    display: none;
    position: relative;
    height: 60px;
    top: -20px;
}

.drop-menu ul::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -30px;
    left: 30px;
    border-width: 15px;
    border-color: transparent transparent red transparent;
    border-style: solid;
}

.drop-menu ul {
    background-color: red;
    position: relative;
    top: 20px;
    z-index: 999;
}

edited Aug 30 '12 at 13:23

answered Aug 29 '12 at 01:24

Zoltan Toth

46,981
12
120
134

Unfortunately this answer isn't that semantic because it doesn't use pseudo elements but the effect is so much smoother that I think I'll use this. Thanks! – Ashitaka Aug 30 '12 at 10:26
@Ashitaka I've updated my answer to be smooth and semantic at the same time :) http://jsfiddle.net/SZWmd/32/ – Zoltan Toth Aug 30 '12 at 13:23

Oriol · Answer 2 · 2012-08-29T02:36:24.367

See http://jsfiddle.net/SZWmd/23/

The problem is that while sliding, the element must have overflow:hidden, but then the triangle is hidden too.

Then, you have to slide .drop-menu ul instead of .drop-menu. You could easily do

$('.drop-menu-button').click(function() {
    $('.drop-menu').toggleClass('visible');
    $('.drop-menu ul').slideToggle();
});

and use this selector:

.drop-menu.visible::before

But the problem is that when is sliding up, the triangle is hidden at the beginning.

Then, you need

$('.drop-menu-button').click(function() {
    if($('.drop-menu').hasClass('visible')){
        $('.drop-menu ul').slideUp('',function(){
            $('.drop-menu').removeClass('visible');
        });
    }else{
        $('.drop-menu').addClass('visible');
        $('.drop-menu ul').slideDown();
    }
});

Edit:

You can also use

$('.drop-menu-button').click(function() {
    $('.drop-menu').addClass('visible');
    $('.drop-menu ul').slideToggle('',function(){
        if(!$(this).is(':visible')){
            $('.drop-menu').removeClass('visible');
        }
    });
});

See it here: http://jsfiddle.net/SZWmd/31/

How to slide toggle a pseudo element?

2 Answers2