Hello guys, please, anyone knows how to implement this feature ? Thanks a Lot!
(here’s the link with the resources on git hub)
Hi @KVO
something like this ? I think you don´t need extra code. You can do this inside Blocsapp
( I do it really quick, I dont style anything )
tom
Did you try this in a browser @tom2, because Bootstrap vanilla menus do not support multiple levels.
Never mind, I just tried it. It does work.
Hello @tom2 , thanks for your reply.
I’ve already tried to use the dropdown feature inside the blocs App
em the menu manager, but I really need a menu (and sub itens) that offer more control in terms of styling and position/behavior precision.
The site I am build is this: pesa.com.br
The link with a Boostrap menu that I showed in the inital post, seems to offer it.
Hey @KVO, the Github project you reference uses the standard Bootstrap classes. You can actually just copy and paste the CSS into the page header and you can modify the classes to suit your design.
You can add these classes to the class manager too and do it from there.
Eg.
- Setup your navigation like in this video
- Copy the CSS code from this page and place in the Page Header between these tags like this…
<style>
.dropdown-menu {
margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
left: 100%;
top: 0%;
margin:0 20px;
border-width: 0;
}
.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
background: #007bff;
color: white;
}
.dropdown-menu > li.show > a{
color: white;
}
@media (min-width: 768px) {
.dropdown-menu .dropdown .dropdown-menu {
margin:0;
border-width: 1px;
}
}
</style>Hello @PeteSharp, thank you very much for your attention.
The first item of your instruction (the video you made) its ok , I understand and know how to set up. But the part of using css and the class manager, I am a truly newbie . the codes on github, talks about Requirement of
jQuery
boostrap 4
animated.css
… and it is hover dropdown. (the hover I am using in this menu pesa.com.br I’ve learned here (Thanks Blocs App Forum!!) .
The company is asking me to build sub itens now…
Jquery and bootstrap are friends and is also the framework that Blocs is built on. It’s already included on export / preview
For example, if you look at the HTML of the domain you posted, you will already seem they are being referenced.
Hi @PeteSharp
I don´t understand what you mean? This multilevel menus create in blocs don’t work in a browser ?
Hello Guys,
And if this multilevel hover menu, uses only html and css, like this one:
I tried this:
- a bloc ate the top/global area, sticky, with no gutter. Inside it, a code bric with the html… (no preview …)
- created a .css file with the code and included as attached at the page settings.
But it does not work…
Hello forum,
Keep working on a new menu.
I’ve tried to build this, with a code bric (is it correct?)
The blocs file test is attached.
Please, need some help with how to style it (fonts, Colors…) and
how to include the links. Thank you very much!
My Site.bloc (1.4 MB)