Category: jQuery

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.

jQuery UI tabs with vertical navigation

Posted by – March 18, 2012

I am currently working on a settings view for the WebConsole application. This view will consist of many smaller views for editing configuration. I am using jQuery UI is the obvious choice for me was Tabs control available in this library. Unfortunately I was not very happy with its default layout. The problem was that my main menu is laid out horizontally so I wanted to distinguish somehow tabs which are just below it. I have solved it changing navigation in tabs from horizontal to vertical. Fortunately it turned out very easy and required only some CSS. Below I am presenting the result, CSS and HTML/Razor source code.

jQuery UI tabs with vertical navigation

HTML/Razor source code

@model ByteCarrot.WebConsole.Web.Controllers.Settings.SettingsViewModel</pre>
<div id="settings">
<ul>
	<li><a href="@Url.Action(MVC.Account.List())">Users</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 1</a></li>
	<li><a href="@Url.Action(MVC.Account.List())">Settings 2</a></li>
</ul>
</div>
<script type="text/javascript">
     $(function () {
         $("#settings").tabs();
     });
</script>

CSS source code

div#settings {
    position: relative;
    padding-left: 200px;
}

div#settings > div {
    min-height: 300px;
}

div#settings .ui-tabs-nav {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 200px;
    padding: 5px 0px 5px 5px;
}

div#settings .ui-tabs-nav li {
    left: 0px;
    width: 195px;
    border-right: none;
    overflow: hidden;
    margin-bottom: 2px;
}

div#settings .ui-tabs-nav li a {
    float: right;
    width: 100%;
    text-align: right;
}

div#settings .ui-tabs-nav li.ui-tabs-selected {
    border: none;
    border-right: solid 1px #fff;
    background: none;
    background-color: #fff;
    width: 200px;
}

If you are fan of .less project here is the same CSS in LESS format:

div#settings
{
    position: relative;
    padding-left: 200px;

    > div
    {
        min-height: 300px;
    }

    .ui-tabs-nav
    {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 200px;
        padding: 5px 0px 5px 5px;

        li
        {
            left:  0px;
            width: 195px;
            border-right: none;
            overflow: hidden;
            margin-bottom: 2px;

            a
            {
                float: right;
                width: 100%;
                text-align: right;
            }
        }

        li.ui-tabs-selected
        {
            border: none;
            border-right: solid 1px #fff;
            background: none;
            background-color: #fff;
            width: 200px;
        }
    }
}

I hope it will be useful.