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;
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!
Regards,
Mauricio
Re: Top Menu
Posted: 09 Nov 2015, 16:02
by mert.sincan
Glad to hear, thanks a lot for the comments