How to build a menu for your website

19 views

Skip to first unread message

Dirk Mahlmeister

unread,

Sep 8, 2015, 9:00:01 AM9/8/15

to Webpgr

This text explains how to build a static navigation bar (menu) for you page. The code will create the following at the top of your webpgr-website:

If you are not in edit mode already press ctrl-e and log in to your webpgr account.

1. Open the developer-shell by pressing ctrl-m.

2. Copy the following code to the CSS-field. You can change the font and the colors here.

/*design page menu*/
#menu {
width:100%;
height: 70px;
position: fixed;
transition:  1s;
background-color: rgba(115,115,115,0.4);
-webkit-transition: 1s;7
}
#menu-block {
position: absolute;
top: 20px;
right: 65px;
transition: top 1s;
-webkit-transition: top 1s;
}
.menulogo {
margin: 20px;
float: left;
}
.menuentry {
padding: 10px;
text-transform: uppercase;
color: white;
font-size: 24px;
font-family: Open Sans Condensed;
text-decoration: none;}

.menuactive {
  color: #ffee20;
}
.menuentry:hover{
  color: #ffee20;
}

3. Copy the following code to the HTML-field. You can change the menu logo in the left corner here. Also change all occurring "about, courses, prices and contact" (each 3x) to the names of your viewports (subpages)

<div id="menu">
  <a class="menuentry" href="home"><img class="menulogo" src="/static/dump/983/logo1.png"> 
 <div id="menu-block">
   <a class="menuentry" id="menu_about" href="about">About</a>
   <a class="menuentry" id="menu_courses" href="courses">Courses</a>
   <a class="menuentry" id="menu_prices" href="prices">Prices</a>
   <a class="menuentry" id="menu_contact" href="contact">Contact</a>
 </div>
</div>

4. Copy the following code to the JS-field and klick the green save button next to the JS button!

$(app).on('view_changed',function(e,v){
debugger;
$('.menuentry').removeClass('menuactive');
debugger;
$('#menu_'+v).addClass('menuactive');
});