source - Original source files other files are part of the source, you do not need to upload any of these to your server. Use these to change the code or style.
deploy – Published files for adding item to the site. These are the files you need to upload to your server.
help – Help file (HTML)
Open Sans (You can download it here as free: http://www.fontsquirrel.com/fonts/open-sans)
You can change font from CSS file.
Installing the menu requires the following steps.
Below describes these steps in more detail.
In step 1, to include css files, simply specify the following lines of code within your <head> tag:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/alpha-menu.css" /> <link rel="stylesheet" type="text/css" href="css/alpha-menu/orange.css" />
You can change menu theme by changing orange.css with another css file located in css/alpha-menu/ folder.
You can remove font-awesome.min.css if you won't use Font Awesome icons.
You can use another Google web font or fully remove it if you want.
In step 2, you will need to include the jquery's library files, other plugins used and the menu's file jquery.alpha-menu.js which is located in the js directory. The code below shows the include in a html page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=4.exp&sensor=false"></script> <script type="text/javascript" src="js/jquery.alpha-menu.js"></script>
You need to use Google Maps API when you add a map to the menu.
Note: The css, js files are the compressed production version of the file. If you intend to modify the menu's source code, you will need to look at files in source folder and it is recommended that you minify the modified file afterwards.
In step 3, to specify the tags of the menu itself, refer to the example in the index.html file. In that file, you'll see a block of tag starting and ending with:
<ul class="alpha-menu"> <!-- all the tags in between, see index.html for the complete code --> </ul>
Finally in step 4, you will need to instantiate a javascript function call to get the menu initialized. The example code looks like this below:
<script type="text/javascript"> $(document).ready(function() { $(".alpha-menu").alphaMenu(); }); </script>
This will instantiate the menu using the default parameters.
Each menu item has some special classes.
Main
Responsive Toggle
Logo
Icons
Dropdown
Content Dropdown
Grid System
Search Place
Miscellaneous
You can change some common attributes of the menu through the parameters of the plugin. Below is an example of the attributes being specified with corresponding values.
Note: if you want to leave a parameter with its default value, you can omit that parameter in the javascript call.
<script type="text/javascript"> $(document).ready(function() { $(".alpha-menu").alphaMenu({ position:"", //top, bottom, left, right fixed:false, sticky:false, fullWidth:true, responsive:"switch", //simple, switch[-margin], stack[-margin] showOn:"click", //hover, click, toggle effect:{ name:"fade", //fade, slide[-top, -bottom, -left, -right] speed:300, //Animation speed (ms) delay:0, //Delay between animation (ms) easing:"ease" //Easing function, can use cubic-bezier() } }); }); </script>
Attribute | Properties | Description |
---|---|---|
position | string | Specifies the CSS position of the menu. Set to top, bottom, left or right. |
fixed | boolean - Default: false | Specifies if the menu is fixed to one of sides depending on the position value. Set to true or false. |
sticky | boolean - Default: false | Specifies if the menu sticks to one of sides depending on the position value when it reaches the edge of the window. Set to true or false. |
fullWidth | boolean - Default: true | Specifies if the menu width is auto or full width. Set to true or false. |
responsive | string - Default: switch | Specifies the responsive view style of the menu. Set to simple, switch, stack, switch-margin or stack-margin. |
showOn | string - Default: hover | Specifies the menu visibility function. Set to hover, click or toggle. |
name | string - Default: hover | Specifies the menu preset show effects. Set to fade, slide-up, slide-down, slide-left or slide-right. You can set it to false to remove effect. |
speed | number - Default: 300 | The menu effect speed in milliseconds. |
delay | number - Default: 100 | The time delay to show/hide menu in milliseconds. |
easing | string - Default: ease | Specifies the easing effect. Set to ease, ease-in, ease-out, linear or cubic-bezier. You can generate it here. |