NAVIGATION MENU
NAVIGATION BAR
HORIZONTAL MENU BAR
Reveal Sub Menu
Click the Main Button Twice
to Reveal the Sub-Menu Buttons
VERTICAL MENU BAR
Reveal Sub Menu
Tick This Checkbox
CUSTOM MENU COMPOSITIONS
There are several type of custom menu compositions available in Tersus. To create this unique compositions, an advance workaround that combine local Muse elements with the additional JavaScript and CSS has been implemented.
CUSTOM TOP SLIDE MENU COMPOSITION WITH ADDITIONAL JAVASCRIPT & CSS
VIEW DEMO
*Click button to view the demo page
Menu Widget inside the State Button.
The buttons have been assigned with the style
( menuTopSlideButton )
State Button container box that holds the
menu widget and other objects like the logo
When the Hamburger Icon is clicked, this box will slide down
( menuTopSlideNav )
Rectangle for background
( menuTopSlideNavBG )
Hamburger Icon Button to show and hide the menu composition
( menuTopSlideNav-Btn )
CUSTOM SIDE SLIDE MENU COMPOSITION WITH ADDITIONAL JAVASCRIPT & CSS
VIEW DEMO
*Click button to view the demo page
Hamburger Icon Button to show the menu composition
( menuSideSlideNav-Btn )
Close Button to hide the menu composition
( menuSideSlideNav-Close )
State Button container box that holds the menu widget.
When the Hamburger Icon is clicked, this box will slide to reveal the menu compostion
( menuSideSlideNavLeft / menuSideSlideNavLeft )
Rectangle for background
( menuSideSlideNavBG )
Menu Widget inside the State Button.
The buttons have been assigned with the style
( menuSideSlideButton )
SCROLLABLE BOX FOR SIDE MENU
On smaller screen with a shorter viewport height, a custom scrollable box created by integrating Muse with the additional CSS has been added. This is to make sure that overflow content can be seen by scrolling the box up and down.
Scrollable Box
Implementation
Placed Inside
Placed Inside
=
The Complete Composition, Which is a Combination of Several Elements
Menu Widget
State Button Container Box. The Main Container and Outermost Element in the Composition
State Button Container Box that Holds the Menu Widget
This is the Scrollable Box
Graphic Style
( menuScrollBox )
Styling Code to Optimize the Scrollable Box
Optimizing the Scrollable Box for Different Height of Menu Widget
For the best result, in the styling code, set the height value to be about 100px more than the height of the menu widget.
For example, if the menu widget's height is 450px, then the value that is best put in the styling code is 550px.
If Menu Widget Height is 450px,
Height Value in the Styling Should be Best Put as 550px
"<style> .menuScrollContent { height: 550px; } </style>"
Advance Optimization for the Scrollable Box
"
<style>
@media screen and (max-width: 1050px) { .menuScrollContent { height: 550px; }
@media screen and (max-width: 800px) { .menuScrollContent { height: 500px; }
@media screen and (max-width: 670px) { .menuScrollContent { height: 450px; }
@media screen and (max-width: 450px) { .menuScrollContent { height: 420px; }
@media screen and (max-width: 380px) { .menuScrollContent { height: 4000px; }
</style>
"
TOP AND SIDE SLIDE MENU ‘HIDE ON SCROLL’ FUNCTION
This is a function that tells the slide menu to hide or slide back to its original position when the page is scrolled down.
Implementation
How to Remove the Function
TOP MENU BAR SLIDE DOWN & UP ON SCROLL
Some menu compositions come with a top bar background that is initially hidden when the page is displayed, and will slide down when the page is scrolled down. This is to give a distinctive contrast between the menu elements and the page content so that they are always visible.
VIEW DEMO
*Click button to view the demo page
Implementation
Menu bar background has been assigned with the style
( slideInScroll )
All content © Tersus, 2019. All rights reserved.