CODEWITHSUNDEEP
jquerycss
nainy
nainy

Reputation: 540

jquery dropdown menu border issue

Here's a fiddle I made: http://jsfiddle.net/8ML3u/

I needed to simulate this kind of dropdown menu (#topnav) where the bottom border merges just where the upper menu element is located. I came up with this solution but it just isn't flexible enough, breaks down in different browsers and it doesn't work in IE8 at all. I'm very confused as to how else I can make this kind of menu. What can I do?

Here's what I'm trying to make: http://i39.tinypic.com/2zghfnt.png

EDIT: Sorry, I might have not made it clear enough, but the menu should be completely transparent and the backgrounds behind it are not static.

Upvotes: 0

Views: 276

Answers (2)

omma2289
omma2289

Reputation: 54619

Here's my solution, I used a similar approach to what you had, I dynamically append an element to display the border part that is missing and made it simpler by having most of the style already in CSS and just having to calculate the width:

Javascript

$(document).ready(function () {
    $('#topnav > li').hover(function () {
        if ($(this).children('ul').length > 0) {
            var submenu = $(this).find('ul:first');
            var border = $('<div class="border">').css('width', submenu.width() - $(this).width() + 'px');
            submenu.before(border);
            $(this).css('border-bottom','transparent');
        }
    }, function () {
        $(this).find('.border').remove();
    });
});

CSS

.border {
    height: 1px;
    border-bottom: 1px grey solid;
    position: absolute;
    left: 100%;
    bottom: -1px;
}

Example fiddle

Upvotes: 1

Archna Rangrej
Archna Rangrej

Reputation: 664

I edit this fiddle : http://jsfiddle.net/8ML3u/1/

Now You can see. Is it right?

Upvotes: 2

Related Questions