Mini-Icon Settings Menu with the jQuery Toolbar Plugin
Some dynamic user profile layouts have been implementing more complicated JavaScript features. Notably the dropdown settings menu has been a staple of social networking websites. This is a great method for allowing easy access to updating the user profile, or even posting new content onto the website. The jQuery Toolbar.js plugin allows us to create a mini settings menu nested with Bootstrap icons.
In this tutorial I want to show how we can build a small user profile page with a mini-settings tooltip popup. Each of the user options is defined by an icon glyph related to the action. This may be confusing to some users, but you can change these values to be any contextual item as well. The mini tooltip is meant to save room in your webpage by offering quick access to popular site features. Check out my live sample demo to get an idea of what we are making.
Live Demo – Download Source Code
Getting Started
The first step is to download a copy of the Toolbar.js plugin from Github. This will include their own webpage demo, along with the core files we need to get the plugin working. Namely these are bootstrap.icons.css and the accompanying glyphicons PNG image. We also need the jquery.toolbars.css document for the default tooltip styles, along with jquery.toolbar.min.js for the actual toolbar plugin codes. This requires a dependency on jQuery which we can include directly through Google’s CDN.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Popup Toolbar Icons Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.toolbars.css">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.icons.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.toolbar.min.js"></script>
</head>
When I was testing this plugin I could not get it to run properly with the jQuery 1.10.1 version. For some reason there must be a weird bug in the update because I can get everything working with the version released directly before this current release. Hopefully it will all work out in the near future. Just be aware of this tip when you go to build Toolbar.js into your own projects.
Adding the Icons
Looking inside the page HTML itself is rather easy to compile. You can place the toolbar navigation HTML almost anywhere in the page and it should work. The jQuery codes use absolute positioning to keep this element within the container, both for the fadeIn and fadeOut animation effects. In my page I have kept the toolbar HTML within the container so that everything is organized and easy to edit.
<div id="menucontainer" style="position: relative;">
<span id="editmenu"><img src="images/edit-profile-icon.png" alt="Edit"></span>
<div id="user-options" class="toolbar-icons" style="display: none;">
<a href="#"><em class="icon-user"></em></a>
<a href="#"><em class="icon-edit"></em></a>
<a href="#"><em class="icon-comment"></em></a>
<a href="#"><em class="icon-picture"></em></a>
<a href="#"><em class="icon-facetime-video"></em></a>
<a href="#"><em class="icon-cog"></em></a>
</div>
</div>
The Twitter Bootstrap library has a class for organized PNG icons. These may be implemented almost anywhere in your layout, and the default Toolbar.js plugin uses them exclusively within the menu. Class names are based off the icons themselves, such as .icon-user which displays an outline of a person. It would be possible to use an icon font instead, which can scale naturally based on the font size. Or you could even use text and skip the glyphs altogether.
But the greatest part of this navigation is the simplicity for getting it to append anywhere on the page. You merely attach this to an element and the event listener will activate based on the user’s click action. Most of the CSS menu items are typical but I want to outline one part of my custom styles.
#editmenu {
display: block;
margin-top: 5px;
width: 36px;
height: 30px;
text-align: center;
padding-top: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #121212;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.3), 0px 1px 0px 0px rgba(255,255,255,0.2);
background-color: #434343;
background-image: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#434343));
background-image: -webkit-linear-gradient(top, #595959, #434343);
background-image: -moz-linear-gradient(top, #595959, #434343);
background-image: -ms-linear-gradient(top, #595959, #434343);
background-image: -o-linear-gradient(top, #595959, #434343);
background-image: linear-gradient(top, #595959, #434343);
cursor: pointer;
}
#editmenu:active {
background-color: #404040;
background-image: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#404040));
background-image: -webkit-linear-gradient(top, #505050, #404040);
background-image: -moz-linear-gradient(top, #505050, #404040);
background-image: -ms-linear-gradient(top, #505050, #404040);
background-image: -o-linear-gradient(top, #505050, #404040);
background-image: linear-gradient(top, #505050, #404040);
box-shadow: inset 0px 2px 6px 1px rgba(0,0,0,0.65), 0px 1px 0px 0px rgba(255,255,255,0.2);
}
#editmenu img { opacity: 0.7; }
#editmenu:hover img { opacity: 1.0; }
The edit menu is actually a span HTML tag located inside the menu container. The design is built using CSS3 gradients along with a small compose icon as a PNG image. It will increase to 100% opacity when the user hovers over the menu, and it provides a nice effect which is all generated using CSS3.
Toolbar.js in Action
Since all of the other CSS is written into libraries we really don’t need to examine it. You do have the option to overwrite all the default Toolbar styles for yourself, and it doesn’t take much effort when you can inspect the elements using Chrome or Firebug. But I am certainly more impressed with the Toolbar plugin so let’s dive into the JavaScript codes.
$(function(){
$('#editmenu').toolbar({
content: '#user-options',
position: 'bottom',
hideOnClick: true
});
The toolbar is attached onto my #editmenu button and will trigger once the user clicks. For the plugin content option I’m passing #user-options which should target the internal menu list of icons. Remember that you can style this in any way you choose – it just helps to work with the default Toolbar.js styles as you are first getting started.
The position may also be adjusted based on the top, right, left or bottom. I used “bottom” in my example because it has the most room where the icons are not cutting off important page content. But Toolbar.js is extremely flexible and you really can implement this almost anywhere. The other option hideOnClick will hide the toolbar menu after the user clicks an icon. This defaults to false but I’ve set it as “true” since that makes more sense.
Typical Event Handlers
Along with the typical options for Toolbar.js we can also attach functions onto various events. toolbarShown and toolbarHidden are two basic examples which allow you to run custom JS codes once the menu displays and hides itself. But within my demo example I have written a function attached onto toolbarItemClick. This will trigger a function after the user clicks onto any toolbar item.
$('#editmenu').on('toolbarItemClick', function(event){
// when the user clicks an icon we call this function
console.dir(event);
$(this).trigger('click');
});
});
The events are handled using jQuery’s internal .on() method. We pass the event object into this new function which can tell us details about the click event, and which specific icon has been selected. I am executing a function console.dir() which will output the event data into your browser console. It will display in a different section for each type of browser – but you can always view the console data in some way.
Also you may notice that my last line of code uses jQuery’s .trigger() method for calling a click event. This will force the click to behave as normal instead of just executing my callback function. So we will get some console output related to the click event, and then the toolbar will auto-hide itself just like the user had clicked normally. There are lots of ways to customize this amazing plugin and I think my sample demo can provide a good starting point.
Live Demo – Download Source Code
Final Thoughts
The vast quantity of jQuery plugins has been growing rapidly. I am a huge fan of open source web development, and the jQuery library is a prime example for modern webmasters. I hope this guide may prove useful for anybody looking to customize the Toolbar.js plugin. There are a number of optional parameters which let you control actions and callback functions after the user selects a menu item. I have gone into some detail about these parameters, but check out the plugin homepage if you want to learn more.
The post Mini-Icon Settings Menu with the jQuery Toolbar Plugin appeared first on Treehouse Blog.
]]>
Some dynamic user profile layouts have been implementing more complicated JavaScript features. Notably the dropdown settings menu has been a staple of social networking websites. This is a great...
http://feedproxy.google.com/~r/teamtreehouse/~3/TuLd7KUiZrY/mini-icon-settings-menu-with-the-jquery-toolbar-plugin
https://my3.my.umbc.edu/api/v0/pixel/news/30881/guest@my.umbc.edu/a8b81c51baa8a515fc1114da854fbc90/api/pixel
android
css
design
development
html
ios
javascript
learn-to-code
responsive
web
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 05 Jun 2013 17:05:05 -0400
Google to take on Adobe?
The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating.
Thousands of designers have been searching for alternatives to Creative Cloud products, but with Adobe’s near-monopoly on professional grade web design software alternate applications are thin on the ground.
The time is right it seems, for an internet giant to step into the breach…
The biggest name on the web, perhaps the biggest name anywhere, is Google and they already provide business tools that many professionals can’t live without; most of us use Google Drive where once we may have used Microsoft’s Office, and most people access Google Mail numerous times per day.
Google haven’t previously looked like making a play for the huge web design market however, a curious decision given that they hold exclusive rights to the browser with the largest market share (it’s Chrome for anyone who’s been on the ISS for a decade).
That looks about to change. Buried at the bottom of a DoubleClick blog post, Google ‘let slip’ that its new product “Google Web Designer” will be launching in the next few months:
To help advertisers and publishers more seamlessly unlock the potential of cross-device programs, we are investing in a new HTML5 creative development tool – Google Web Designer. Available in the coming months, Google Web Designer will empower creative professionals to create cutting-edge advertising as well as engaging web content like sites and applications – for free. Google Web Designer will be seamlessly integrated with DoubleClick Studio and AdMob, greatly simplifying the process of building HTML5 creative that can be served through Google platforms.
Let’s be clear: it’s highly unlikely that you’ll be switching to a “Google Creative Suite” style product line anytime soon. “Google Web Designer” is expected to be an enhanced version of Google’s already available Google Sites — which isn’t going to threaten Adobe’s market position.
What we’re expecting — and at this point it’s mere speculation — is some kind of hybrid of Chrome’s Developer Tools and Adobe’s Edge tools.
Whilst details are very thin on the ground, what we do know is that the new application will be free. That should make the likes of Squarespace, 1and1, and create.net sit up and take notice. Google’s revenue stream will be driven by integration with its advertising.
It seems a stretch to think that Google Web Designer could replace Creative Cloud applications, but then it wasn’t that long ago that people thought of WordPress as “just a blogging tool”. So make room on your résumé, you may well find Google Web Designer becoming a marketable skill in the next 12 months.
Do you think Google Web Designer will be suitable for professionals? What features are you hoping to see? Let us know in the comments.
Featured image/thumbnail, web designer image via Shutterstock.
Source
]]>
The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating. Thousands of designers have been searching for...
http://www.webdesignerdepot.com/2013/06/google-to-take-on-adobe/
https://my3.my.umbc.edu/api/v0/pixel/news/30864/guest@my.umbc.edu/e729b222865244ad9d6a9fcbe7051ce3/api/pixel
1and1
adobe-creative-cloud
art
create-net
css
design
development
google
google-applications
google-drive
google-web-designer
html
html5
illustrator
javascript
mysql
news
oracle
photoshop
php
sql
squarespace
web-design
web-design-software
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 05 Jun 2013 13:15:06 -0400
Wed, 05 Jun 2013 13:15:06 -0400
Google to take on Adobe?
The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating.
Thousands of designers have been searching for alternatives to Creative Cloud products, but with Adobe’s near-monopoly on professional grade web design software alternate applications are thin on the ground.
The time is right it seems, for an internet giant to step into the breach…
The biggest name on the web, perhaps the biggest name anywhere, is Google and they already provide business tools that many professionals can’t live without; most of us use Google Drive where once we may have used Microsoft’s Office, and most people access Google Mail numerous times per day.
Google haven’t previously looked like making a play for the huge web design market however, a curious decision given that they hold exclusive rights to the browser with the largest market share (it’s Chrome for anyone who’s been on the ISS for a decade).
That looks about to change. Buried at the bottom of a DoubleClick blog post, Google ‘let slip’ that its new product “Google Web Designer” will be launching in the next few months:
To help advertisers and publishers more seamlessly unlock the potential of cross-device programs, we are investing in a new HTML5 creative development tool – Google Web Designer. Available in the coming months, Google Web Designer will empower creative professionals to create cutting-edge advertising as well as engaging web content like sites and applications – for free. Google Web Designer will be seamlessly integrated with DoubleClick Studio and AdMob, greatly simplifying the process of building HTML5 creative that can be served through Google platforms.
Let’s be clear: it’s highly unlikely that you’ll be switching to a “Google Creative Suite” style product line anytime soon. “Google Web Designer” is expected to be an enhanced version of Google’s already available Google Sites — which isn’t going to threaten Adobe’s market position.
What we’re expecting — and at this point it’s mere speculation — is some kind of hybrid of Chrome’s Developer Tools and Adobe’s Edge tools.
Whilst details are very thin on the ground, what we do know is that the new application will be free. That should make the likes of Squarespace, 1and1, and create.net sit up and take notice. Google’s revenue stream will be driven by integration with its advertising.
It seems a stretch to think that Google Web Designer could replace Creative Cloud applications, but then it wasn’t that long ago that people thought of WordPress as “just a blogging tool”. So make room on your résumé, you may well find Google Web Designer becoming a marketable skill in the next 12 months.
Do you think Google Web Designer will be suitable for professionals? What features are you hoping to see? Let us know in the comments.
Featured image/thumbnail, web designer image via Shutterstock.
Source
]]>
The growing dissatisfaction with Adobe’s exodus to the cloud and the accompanying subscription licensing model shows no sign of abating. Thousands of designers have been searching for...
http://rss.feedsportal.com/c/35285/f/661066/s/2ce337d0/l/0L0Swebdesignerdepot0N0C20A130C0A60Cgoogle0Eto0Etake0Eon0Eadobe0C/story01.htm
https://my3.my.umbc.edu/api/v0/pixel/news/31119/guest@my.umbc.edu/968de5be94c930b3a9b74a23bfc16124/api/pixel
1and1
adobe-creative-cloud
art
create-net
css
design
development
google
google-applications
google-drive
google-web-designer
html
html5
illustrator
javascript
mysql
news
oracle
photoshop
php
sql
squarespace
web-design
web-design-software
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 05 Jun 2013 13:15:06 -0400
