Example 2 - Navigation menu

Plan

There are many fancy slide switching widgets, but there isn’t one top navigation menu like, so that is what I will do. The slider will have 5 slides. My slider’s id is 100060, you should check yours as it is written in here.

Execution

Go to the Edit SliderWidgets, and turn on the HTML widget for every Display view. This is the code what I used:

<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 0);">Slide 1</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 1);">Slide 2</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 2);">Slide 3</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 3);">Slide 4</div>
<div class="nextend_navigation_button" onclick="njQuery('#nextend-smart-slider-100060').smartslider('goto', 4);">Slide 5</div>
<style>
.nextend_navigation_button{
padding: 8px 10px;
box-shadow: 0 1px 1px RGBA(0,0,0,0.3);
border: 2px solid rgba(0, 0, 0, 0.4);
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #000000;
background: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
color:white;
display:inline;
}
.nextend_navigation_button:hover{
background: #000000;background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(0, 0, 0, 0.6);
}
</style>

The style is just a copy from one of the button’s style, plus a color, because here isn’t a font style selected, and a display:inline; so the menu items will be next to each other. The javascript code speaks for itself, the onclick event will trigger it, and it will make the slider with the 100060 id to go to the specific slides.

menu_code

In my css code there is a 8px top padding, which is pushing the menu out a little, so that is why I gave 8px position from the top. This is how it looks like:

menu_slider