Wouldn’t it be nice if you could have your node edit tabs (view, edit, manage display, etc.) without having them push your layout down 50-100 pixels? Well, good news: you can!

This is how the node tabs normally look (with my subtheme styles). Not even close to what my normal visitors will see..

This is what I’m going to show you how to do in this post…

You can get a better sense of it from this short video.

I did this with some jQuery and CSS.

jQuery to create and place “button” – in my case, this is a font-awesome icon. This may seem strange, but we’re placing the button inside the div.tabs tag, and then placing div.tabs tag inside the h1 tag…

// edit node buttons
(function($){
    // wait til everything loads before firing
    $(document).ready(function(){
        //insert edit icon into div.tabs
        jQuery('div.tabs').prepend(jQuery("<i class=\"icon-edit\"></i>"));  
        //insert div.tabs into page title
        jQuery('h1').prepend(jQuery('div.tabs'));
    }); 
})(jQuery);

Now, if this is all we did, it would look crazy! We need CSS to do the magic part…

/*first we hide div.tabs, but we also define properties for when we expose it later*/       
    div.tabs ul {
    display:none;
    position:absolute;
    padding:10px;
    margin-top:-10px;
    background:rgb(0,0,0);
    border: 0px none;
    width:260px;
    border-radius: 4px 0 4px 4px;
    z-index:100;
    }

/*this exposes the tabs when we hover over the icon!*/  
    a:hover.icon-edit,
    div.tabs:hover ul,
    div.tabs:active ul {
    display:block;
    }

/*position button - I want it to the left of the h1*/
    div.tabs {
    float:left;
    width:1em;
    }

Your selectors and styles may differ, but the essential thing is to have a trigger/button class (or id) that is inside the div you want to hide/show.