Skip to content

Instantly share code, notes, and snippets.

@hitautodestruct
Last active December 2, 2016 22:12
Show Gist options
  • Star 31 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save hitautodestruct/b6801fd070c4b638c55a to your computer and use it in GitHub Desktop.
Save hitautodestruct/b6801fd070c4b638c55a to your computer and use it in GitHub Desktop.
Uses CSS to minify the Wordpress admin bar into a button. Expands on hover.
<?php
/*
* Plugin Name: Mini Admin Bar
* Plugin URI: http://www.netyou.co.il/
* Description: Makes the admin bar a small button on the left and expands on hover.
* Version: 1.0
* Author: NetYou
* Author URI: http://www.netyou.co.il/
* License: MIT
* Copyright: NetYou
*/
add_action('get_header', 'my_filter_head');
function my_filter_head() { remove_action('wp_head', '_admin_bar_bump_cb'); }
function my_admin_css() {
if ( is_user_logged_in() ) {
?>
<style type="text/css">
#wpadminbar {
width: 47px;
min-width: 47px;
overflow: hidden;
-webkit-transition: .4s width;
-webkit-transition-delay: 1s;
-moz-transition: .4s width;
-moz-transition-delay: 1s;
-o-transition: .4s width;
-o-transition-delay: 1s;
-ms-transition: .4s width;
-ms-transition-delay: 1s;
transition: .4s width;
transition-delay: 1s;
}
#wpadminbar:hover {
width: 100%;
overflow: visible;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-ms-transition-delay: 0;
transition-delay: 0;
}
</style>
<?php }
}
add_action('wp_head', 'my_admin_css');
@ohryan
Copy link

ohryan commented Mar 26, 2013

This is a great idea. But the way it animates in (at least in chrome) could be better.

@gfazioli
Copy link

Mmmm... on FireFox no Mac does't work very well... however good idea

@hitautodestruct
Copy link
Author

Yes, it's more of a proof of concept. This could be much better with some simple javascript.
I might add some just to make it work properly cross browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment