Layout API
Neon Theme comes with pre-defined functions to handle layout behaviors. You have tens of options to make your theme layout look differently.
In this page, you are going to see how you can show, hide, remove or add layout elements. In order to customize the layer JS file neon-api.js
is required to load.
Sidebar Collapsing
Its easy to use, you just have to call one function toggle_sidebar_menu(animate)
.
With Animation
You may apply animation to these functions by sending animate
parameter as true, see it in action:
Incorporating Chat API
This functions can be used only when you have included Chat on your theme.
Toggle Chat + Sidebar Toggle Chat + Sidebar w/ AnimationFor more options about Chat API and see how to implement it click here to read more.
See how its implemented
Code for Toggle Sidebartoggle_sidebar_menu(false);
Code for Force Show Sidebar
show_sidebar_menu(false);
Code for Force Hide Sidebar
hide_sidebar_menu(false);
Code for Toggle Sidebar w/ Animation
toggle_sidebar_menu(true);
Code for Force Show Sidebar (animation)
show_sidebar_menu(true);
Code for Force Hide Sidebar (animation)
hide_sidebar_menu(true);
Markup
Layout Markup is applied for one reason: To enable the sidebar collapsing/expanding. The symbol next to the logo applies this markup:
<!-- logo collapse icon --> <div class="sidebar-collapse"> <a href="#" class="sidebar-collapse-icon with-animation"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition --> <i class="entypo-menu"></i> </a> </div>
If you remove this markup, users will not be able to handle the sidebar visibility, its up to you to decide whether to insert or remove this feature.
Layout Variants
- Collapsed Sidebar
- Collapsed Sidebar & Chat Opened
- Expanded Sidebar & Chat Opened
- Expanded Sidebar without Collapse Feature
- Horizontal Menu & Chat Opened
- Fixed Sidebar
- Both Menus
- Both Menus & Logo Width Fit with Sidebar
- Both Menus & Collapsed Sidebar
- Right Sidebar New
- Right Sidebar Collapsed New
- Right Sidebar + Chat Visible New
- Both Menus (Right Sidebar) New
- Both Menus (Right Sidebar Collapsed) New
- Boxed Layout New
API Functions
Function Name | Description and Usage Details |
---|---|
show_sidebar_menu(animate) |
Shows left sidebar (if not already shown) and if you have specified the parameter animate as true will apply smooth animation on transition.
|
hide_sidebar_menu(animate) |
Hide left sidebar (if not already hidden) and if you have specified the parameter animate as true will apply smooth animation on transition.
|
toggle_sidebar_menu(animate) |
Will use the two above functions, but firstly it will decide on their current state. The animated parameter will simply be passed to the respective functions.
|