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 acplish this?

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

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 acplish this?

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

• javascript
• jquery
• html
• css
• pseudo-element

• The slideToggle hides the element pletely. What if you use jQuery to just toggle the height using animate? – ACJ Commented Aug 29, 2012 at 1:02
• 2 possible duplicate of 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 Commented Aug 29, 2012 at 1: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 Commented Aug 29, 2012 at 1:13

2 Answers 2

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;
}

See http://jsfiddle/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/SZWmd/31/