Page 1 of 1

Top Menu

Posted: 06 Nov 2015, 20:38
by mauriciow
Hello,

Is it possible configure top menu in Rio layout to work the same way in Modena layout?
I would like itens being opened below the icons instead of between.

Regards,
Mauricio

Re: Top Menu

Posted: 07 Nov 2015, 00:47
by mert.sincan
Please try with;

Code: Select all

<style type="text/css">
/* top menu */
#top-menu > li > ul > li {
  padding-left: 20px !important;
}
#top-menu > li > a.active-menu {
    background-color: rgba(255, 255, 255, 0.1);
}
#top-menu li ul {
  width: 150px !important;
  height: 0px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  position: absolute;
  background-color: #ffffff;
  border-radius: 2px;
  margin: 65px 0px 0px -100px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
  -moz-box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
  box-shadow: 0px 1px 4px 0px rgba(43, 59, 93, 0.6);
  -webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#top-menu li ul.active-menu {
  height: auto;
  margin: 65px 0px 0px -100px;
  padding-bottom: 10px !important;
  -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#top-menu li ul li input[type="text"] {
    color: #546e7a;
    font-family: 'roboto_condensedregular';
}

#top-menu li ul li a {
  color: #546e7a;
  display: block;
  border-bottom: none;
  font-family: 'roboto_condensedregular';
}

#top-menu li ul li a.active-menu,
#top-menu li ul li a:hover,
#top-menu li ul li a:focus {
  background-color: #f5f5f5;
}
</style>

Re: Top Menu

Posted: 07 Nov 2015, 14:55
by mauriciow
Thanks!

It worked great on desktop browser. However, it looked weird in small devices.

Is it possible apply this change only to desktop browsers? I tried to put it between:

Code: Select all

@media (min-width: 640px) and (max-width: 960px) {}

But it didn't work as expected.

Regards,
Mauricio

Re: Top Menu

Posted: 08 Nov 2015, 18:47
by mert.sincan
Please try with;

Code: Select all

@media (min-width: 961px){}
We use these media queries in Layouts;

Code: Select all

/* Large desktop */
@media (min-width: 961px){
	
}
 
@media (min-width: 961px) and (max-width:1200px){
	
} 
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px){
}

/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {	
}

/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
}
Also, I think you should add this Js code to close the open menuitems on Topbar;

Code: Select all

....
bindEvents: function() {
    ...
    this.topMenu.find('li').clickOff(function() {
       $this.topMenu.find('.active-menu').removeClass('active-menu');
    });
},
...

Re: Top Menu

Posted: 09 Nov 2015, 13:42
by mauriciow
Thank you very much!
It worked perfectly, you just saved days of my work! :D

Regards,
Mauricio

Re: Top Menu

Posted: 09 Nov 2015, 16:02
by mert.sincan
Glad to hear, thanks a lot for the comments ;)