WP Plugin: Fading Menu with notification Bar

Fading Menu with notification Bar is a WordPress Plugin that will allow you to add your navigational menu (main menu or custom menu defined by you) along with notification bar at the top of your browser. Simply scroll down your browser a bit to see it in live action!

“Welcome to our brand new WordPress plugin. Fading Menu with notification Bar will implement a convenient and attractive menu at the top of your browser. Add notification text, social icons or twitter feed and make them visible!

FADING CSS3 MENU DESCRIPTION

Welcome to our brand new WordPress Plugin. WordPress Fading Menu will implement a simple navigation menu that will turn on after a user scrolls down your page a bit. To see it in live action simply scroll down a bit and you will see the menu appearing at the top of your browser. The position where menu appears can be set via Administration Panel (in pixels from the top). The menu picks the data from your main WordPress Menu or from an additional menu that you can build in your WordPress Apperance/Menu settings.

Plugin also has the abilitiy to show a simple notification bar. You can set the text manually (with a simple text editor that will allow you to add links and change color on the fly), or set it to always show your latest tweet. This will allow you to always have an up to date notification bar with your latest news.

Social icons can be added to the right part of the fading menu. You can add your own social icons with the URL and alt text. There is no limitation to how many social icons you can add (apart from the horizontal space). You can find many amazing social icons at WebTreats.

SCREENSHOTS

Below are screenshots of different predesigned skins along with submenus. Please note that you can also create your own custom skins with custom background colors, fonts, borders, etc. Click on images for a larger preview.

Preview of predesigned skins in smaller format.

Preview of predesigned skins in bigger format.

Preview of submenus.

QUICK GUIDE

When you unzip the files you just bought look for the file wordpress-menu-pt.zip. Go to your WordPress admin panel and select “Plugins”. Click on button “Add new” and on next page click upload. Now browse for the zip file mentioned above and click Install now. All you have to do now is to activate the plugin. Settings for the plugin can be found under settings/Wp Menu.

SETTING UP THE MENU ITEMS

The plugin picks the menu from the dropdown list called WP PremiumCoding Menu that has been added to Appearance/Menus (see the screenshot). Usually you will only have the default menu (the one used in your WordPress installation). However this can be changed and you can add a custom menu to be displayed instead of the default one. Screenshot below is showing the settings in Appearance/Menus tag. The WP PremiumCoding Menu dropdown list is used to set the menu that will be used. To add a custom menu simply click the plus icon and then name the menu. After that simply add the items that you wish to display and save the menu. Now select this menu in the dropdown list of WP PremiumCoding Menu and click save. Menu is now added to the plugin and will be displayed the next time you refresh your website.

EXAMPLE SETTINGS

Use the settings below to set up the menu as fast as possible. You can tinker the settings later to achieve the desired look.

MAIN SETTINGS

• Where to fade the Menu – set the margin to 100
• Margin from the top or bottom – set the margin to 0
• Position of the menu (from left in %) – set this to 0 to make the menu left aligned
• Animation type – set the animation type to opacity
• Choose the premade skin – set the premade skin to glossy double line Black
• Allow visitors to close menu & notification – set this to true
• Allow visitors to move menu up and down – set this to true
• Default menu position – set it to top

DESIGN SETTINGS

With premade skin choosen set the background opacity to 1.

CHOOSE YOUR FONT

SOCIAL ICONS

First click Add New Icon to start adding your social icons.

• Alternative text – set the text to anything you like
• Path to image – upload and insert the image for yor social icon via WordPress native media uploader
• URL of social Icon – set the URL to which the social icon points when you click on it (for instance http://www.facebook.com)

DOCUMENTATION

Below is a documentation for each settings tab of the plugin.

EDITING SETTINGS OF FADING MENU PLUGIN

Settings for the plugin are divided into five sections, each catering for certain aspects of the plugin.

MAIN SETTINGS

General settings and the premade skin are set here. First you need to set when the menu will actually appear. If you wish the menu to appear after the visitor scrolls down for 200 pixels, you simply enter value 200 to the label. If you set this value to 0, menu will appear right after the user moves downards (by scrolling or by moving the slider).

Second settings define how far from the top or the bottom the menu is placed. Default value is 0, which means the menu is glued to the top of your browser. With this parameter you can move the menu up and down (you can even have in the middle of the browser).

Menu is left aligned by default. With parameter position of the menu, you can move it to the right. Value is in %, so that it keeps ratio on different resolutions.

Animation type defines how menu is shown and hidden. There are two possibilites, opacity and slideToggle. Opacity slowly fades the menu in and out and is a more subtle animation, while slideToggle draws the menu from the top to the bottom.

Premade skins are there to help you set the best possible design that will perfectly fit into the overall design of your website. We have made them in several color combinations and in two sizes (large and mini). Simply choose one color and menu will instantly change. If you wish to set your own colors select Custom Skin and save the settings. You can now set the colors of backgrounds and lines in DESIGN SETTINGS tab.

Last three settings will allow you to enable or disable user interaction with the menu. By default any user can close the menu or move it downwards. If you wish to remove certain abilities simply disable them and users will not be able to close the menu.

Default menu position is at the top. If you wish to set it to the bottom change this setting to bottom.

DESIGN SETTINGS

Background opacity can be set for all the predesigned skins and the default skin. Simply enter value that has to be between 0 (invisible) and 1 (fully visible). All other options of these tab are only available if you have set the custom skin.

You can change several aspects of the menu’s default skin. We have implemented a convenient color picker with which you can set background color of the upper and sub menus, color of hover effects and color of border that separates the menu. This way you can design your menu to fit perfectly on your site.

CHOOSE YOUR FONT

Within this tag all the font settings are set. We have decided to use Google Web Font library. There are 6 fonts available from the list but if you select custom font you can enter any font that is found in the Google Web Font library. Enter the name of the font exactly as it appears in the Google library.

Uppercase is set with the parameter just below the fonts. By default capitalization is the same as it is in your WordPress menu. So if your navigation menu has lowercase letters menu will be in lowercase. If you wish to change the letters to uppercase set this parameter to true.

Font color and size can be set through several parameters that define the color and size of main menu and submenus. You can separately set both the size and colors for upper and lower menu. Last parameter defines the size of the test in notification bar.

NOTIFICATION BAR

Notification bar allows you to add a short news just below the menu. You can add latest news, promotions or any other text that you would like to make more visible to your visitors. Text is added and edited via simple text editor which allows you to add links, change the color of text, make the text bold, etc.

Latest tweet can replace the manually set text if you set the Import latest Tweet setting to true. After that simply enter the username of the Twitter account and the plugin will always display your latest tweet in the notification bar. This way your notification bar will always be up to date with the latest news.

SOCIAL ICONS

Social icons are an important part of every website. We have thought of this aspect also and you can add unlimited amount of social icons (the only limitation is the space) that will be seen on the right part of the menu bar. Adding social icons is simple as you can see from the screenshot below.

Simply click add new icon and then upload the icon image via WordPress Upload form. You can also set alt text that will appear on mouse hover and URL to which the icon points on click.