Tag: CSS

Saving place with jQuery and CSS based hover / context menu

Posted by – April 4, 2012

Monitors and theirs resolutions are getting bigger and bigger, but there is always a problem where to put all buttons, links and other controls to avoid overwhelmed UI. I am big fan of clean UI without unnecessary things used only from time to time. By default on screen should contain only the core information without distracting buttons, switches and things like that. Unfortunately all these additional stuff is required to work with an application so has to be implemented. The trickiest part is to make is available but in a subtle way.

I had such problem working on the last version of WebConsole. My solution is quite trivial and required a little bit of jQuery and CSS. I’ve solved the problem using as I call it “action menus”. These are context menu but activated by hovering mouse not right click. You can check how such “action menu” works in a screencast available below.

All three “action menus” presented in screencast above have the same HTML structure and use the same jQuery script. The look & feel has been totally customized in CSS so it is very useful and simple to use thing.

General structure of “action menu” and base CSS definition show two snippets below.

<div id="account-menu" class="action-menu">
    <span>Welcome <strong>Administrator</strong>!</span>
    <ul class="children">
        <li class="nowrap-text"><a href="#">Change Password</a></li>
        <li><a href="#">Sign Out</a></li>
    </ul>
</div>
div.action-menu {
    position: relative;
    margin: 0px;
    padding: 0px;
}

div.action-menu * {
    margin: 0px;
    padding: 0px;
}

div.action-menu a {
    text-decoration: none;
}

div.action-menu ul {
    list-style: none;
    display: none;
    position: absolute;
    z-index: 9999;
}

jQuery executed to make “action menu” reacting to hover is also very simple and straightforward.

// Adds action menu
function addActionMenus() {
    $('div.action-menu').hover(
        function () {
            $(this).addClass('hover');
            $(this).find('ul').show();
        },
        function () {
            $(this).removeClass('hover');
            $(this).find('ul').hide();
        }
    );
}

jQuery(function () {
    addActionMenus();
});

As I mentioned before rest of customization is done in CSS. The demo from screencast contains all code presented above and customizations made for each menu presented there. I am sharing it with you with hope it will be useful. You can download it here.

Please, let me know what do you think about this type of hiding actions available only in a particular contexts and my simple implementation.