Menu

Lets assume that menu_div field has value ''menu-portal''. Following CSS code will make our menu look like tabbed folders.

 

/*********************** Main menu *************************/
.menu-portal {
  padding-top: 3px;
  text-align: left;
}
.menu-portal a {
  color: #396;
  font-size:13px;
  text-decoration: none;
}
.ul-menu-portal {
  padding:  1px 1px 0px 0px;
  border-bottom: 2px solid #eee;
  height: 21px;
  margin: 0px;
}
.li-menu-portal-item {
  display:inline;
  list-style:none;
  padding: 4px 10px;
  margin-right: 1px;
  border: 1px solid #eee;
  border-bottom: 0px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: inset 0 20px 20px -10px #ddd;
}
.li-menu-portal-item:hover {
  background-color: #fff;
  border-bottom: 2px solid white;
  padding: 7px 10px 5px 10px;
  box-shadow: inset 0 10px 5px -7px #396;
}
.li-menu-portal-item:hover a {
  color: #000;
}
.li-menu-portal-selected {
  display:inline;
  padding: 7px 10px 5px 10px;
  border: 1px solid #fff;
  border-left: 1px solid #eee;
  border-bottom: 2px solid white;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: inset 0 10px 5px -7px #396;
}
/* Problem only on mozilla */
@-moz-document url-prefix() {
  .li-menu-portal-selected {padding-bottom:4px;}
}
.li-menu-portal-selected a {
  color: #000 !important;  
}
.li-menu-portal-item a img {
  vertical-align: middle;
  padding-bottom: 0px;
}

 

Main menu is created with DcSimpleMenu document. Every menu item defines link to page. Each page will initially load its application menu. Lets look in the next chapter how an application menu is created. 


Last update: 08.05.2018