drop down menues for top bar

User avatar
aragorn
Posts: 2659
Joined: 29 Jun 2013, 12:38

28 Apr 2016, 09:03

Hi Kimg,

No problem;) I can help to you for your issues.
If I substitute the "#" in the URL with a real URL like this:

<li><a href="http://primefaces.org"><i class="icon-sun3 Fs18 Fleft MarRight10"></i> <span> New conference</span></a></li>

I see the changed text:

New conference

and the browser shows the link text. But when i click the menu item my browser doesn't navigate to the desired site/URL.
Please change my JS for this issue;

Code: Select all

....

       //topbar
        this.topbarMenu.find('a').click(function (e) {
            var link = $(this),
                    submenu = link.next('ul');

            if (submenu.length) {
                if (submenu.hasClass('active-menu')) {
                    submenu.removeClass('active-menu');
                    link.removeClass('active-menu');
                    $this.topMenuActive = false;
                } else {
                    $this.topbarMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                    link.addClass('active-menu').next('ul').addClass('active-menu');
                    $this.topMenuActive = true;
                }
                
            } else {
                if ($(e.target).is(':not(:input)')) {
                    $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                    $this.topMenuActive = false;
                }
            }
            
/* --------------- ADDED ----------- */
            var href = link.attr('href');
            if(href && href.trim() == "#") {
                e.preventDefault();
            }
/* ---------------------------- /
        })
....
full code

Code: Select all

<script type="text/javascript">
     //<![CDATA[
Atlas.bindEvents = function () {
    var $this = this;
    this.firstActiveMenu = null;

    this.menuButton.on('click', function () {
        $this.menuButtonClick = true;

        if ($this.menuWrapper.hasClass('active')) {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        } else {
            $this.menuButton.addClass('active');
            $this.menuWrapper.addClass('active');
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        }
    });

    this.topmenuButton.on('click', function () {
        $this.topmenuButtonClick = true;

        if ($this.topbarMenu.hasClass('active')) {
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        } else {
            $this.topbarMenu.addClass('active');
            $this.topmenuButton.addClass('active');
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        }
    });

    this.menulinks.on('click', function (e) {
        var menuitemLink = $(this),
                menuitem = menuitemLink.parent();

        if (menuitem.hasClass('active-menu-parent')) {
            menuitem.removeClass('active-menu-parent');
            menuitemLink.removeClass('active-menu').next('ul').removeClass('active-menu');
            $this.removeMenuitem(menuitem.attr('id'));
            $this.menubarActive = false;
        } else {
            var activeSiblings = $this.findActiveSiblings(menuitem);
            for (var i = 0; i < activeSiblings.length; i++) {
                var activeSibling = activeSiblings[i];
                activeSibling.removeClass('active-menu-parent');
                $this.removeMenuitem(activeSibling.attr('id'));

                activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu');
                activeSibling.find('li.active-menu-parent').each(function () {
                    var menuitem = $(this);
                    menuitem.removeClass('active-menu-parent');
                    $this.removeMenuitem(menuitem.attr('id'));
                });
            }

            menuitem.addClass('active-menu-parent');
            menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
            $this.addMenuitem(menuitem.attr('id'));
            $this.menubarActive = true;
        }

        if (menuitemLink.next().is('ul')) {
            e.preventDefault();
        } else {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
        }

        if (!$this.isPopupMenu) {
            $this.firstActiveMenu = $this.menu.children('li.active-menu-parent');
            $this.removeMenuitem($this.firstActiveMenu.attr('id'));
        }

        $this.saveMenuState();
    })
    .on('mouseenter', function () {
        if ($('body').hasClass('PopupMenu')) {
            return;
        }

        var menuitemLink = $(this),
                menuitem = menuitemLink.parent();

        if ($this.menubarActive && document.documentElement.clientWidth > 960 && menuitem.closest('ul').attr('id') === "layout-menu" && !menuitem.hasClass('active-menu-parent')) {
            var prevMenuLink = menuitem.parent().find('a.active-menu');

            prevMenuLink.removeClass('active-menu').next('ul.active-menu').removeClass('active-menu');
            prevMenuLink.closest('li').removeClass('active-menu-parent');
            $this.removeMenuitem(prevMenuLink.closest('li').attr('id'));
            menuitem.addClass('active-menu-parent');
            menuitemLink.addClass('active-menu').next('ul[role="menu"]').addClass('active-menu');
        }

    });

    this.menuWrapper.clickOff(function (e) {
        if ($this.menuButtonClick) {
            $this.menuButtonClick = false;
        } else {
            $this.menuButton.removeClass('active');
            $this.menuWrapper.removeClass('active');
            $this.menu.children('li.active-menu-parent').removeClass('active-menu-parent').children('a,ul').removeClass('active-menu');
            $this.menubarActive = false;
        }
    });

    this.topbarMenu.clickOff(function (e) {
        if ($this.topmenuButtonClick) {
            $this.topmenuButtonClick = false;
        } else {
            $this.topbarMenu.removeClass('active');
            $this.topmenuButton.removeClass('active');
        }
    });

    $(window).resize(function () {
        $this.equalLinks();
    });

    //topbar
    this.topbarMenu.find('a').click(function (e) {
        var link = $(this),
                submenu = link.next('ul');

        if (submenu.length) {
            if (submenu.hasClass('active-menu')) {
                submenu.removeClass('active-menu');
                link.removeClass('active-menu');
                $this.topMenuActive = false;
            } else {
                $this.topbarMenu.find('> li > ul.active-menu').removeClass('active-menu').prev('a').removeClass('active-menu');
                link.addClass('active-menu').next('ul').addClass('active-menu');
                $this.topMenuActive = true;
            }
        } else {
            if ($(e.target).is(':not(:input)')) {
                $this.topbarMenu.find('.active-menu').removeClass('active-menu');
                $this.topMenuActive = false;
            }
        }
        
        var href = link.attr('href');
        if(href && href.trim() == "#") {
            e.preventDefault();
        }
    })
    .on('mouseenter', function () {
        var link = $(this);

        if (link.parent().parent().is($this.topbarMenu) && $this.topMenuActive && document.documentElement.clientWidth > 960) {
            var submenu = link.next('ul');

            $this.topbarMenu.find('.active-menu').removeClass('active-menu');
            link.addClass('active-menu');

            if (submenu.length) {
                submenu.addClass('active-menu');
            }
        }
    });

    this.topbarMenu.find('li').clickOff(function () {
        if ($this.topmenuButtonClick) {
            $this.topmenuButtonClick = false;
        } else {
            $this.topbarMenu.find('.active-menu').removeClass('active-menu');
            $this.topMenuActive = false;
        }
    });

};
     //]]>
</script>
one more....what can i do to make the menu point under the mouse pointer stand out?
I didn't understand it. Can you please attach a sample screenshot?

kimg
Posts: 24
Joined: 22 Aug 2013, 17:13

28 Apr 2016, 18:34

It works. Thank you again.

What i meant with my other question is just that the menu item under the mouse pointer should have another background color.

I think it's called hover effect....but i'm not sure.

/
Kim

User avatar
aragorn
Posts: 2659
Joined: 29 Jun 2013, 12:38

29 Apr 2016, 13:14

I think you can change the following css codes;

Code: Select all

<style type="text/css">

...

#topbar-menu > li > ul li a:hover,
#topbar-menu > li > ul li a.active-menu {
    background-color: #f2f2f2;
}

#topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
    background-color: rgba(255,255,255,0.1);
}

@media (min-width:480px) and (max-width: 640px) { 

    ...
    #topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }
}

@media (max-width: 480px) {

    ...
    #topbar-menu > li > a:hover, #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }
}

            
</style>
You may make them like the following codes;

Code: Select all

<style type="text/css">

...

#topbar-menu > li > ul li a.active-menu {
    background-color: #f2f2f2;
}

#topbar-menu > li > ul li a:hover {
       background-color: YOUR COLOR CODE
}

#topbar-menu > li > a.active-menu {
    background-color: rgba(255,255,255,0.1);
}

#topbar-menu > li > a:hover {
   background-color: YOUR COLOR CODE
}

@media (min-width:480px) and (max-width: 640px) { 

    ...
    #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }

    #topbar-menu > li > a:hover {
       background-color: YOUR COLOR CODE
    }
}

@media (max-width: 480px) {

    ...
    #topbar-menu > li > a.active-menu {
        background-color: #f2f2f2;
    }

    #topbar-menu > li > a:hover {
       background-color: YOUR COLOR CODE
    }

}

</style>

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest