I want to create a navigation bar with the css framework Materialize.

I am creating a site using the css framework Materialize

There is an example template code, so I am creating it while looking at it.
I got stuck with the navigation button.

as shown below in Showcase of the same site. "I would like to create a ""mouseover nav bar to expand the menu from 1st to 4th tier."""

I looked at the site, looked at the template on the official website, and made trial and error, but I don't understand the structure well.
I don't know if it's only made with the same framework or if it's using javascript or jQuery separately.
It is partly due to my lack of English ability, but I would appreciate it if you could give me some advice.I would appreciate it if you could help me move forward by referring to the template here.

html jquery css

2022-09-30 10:45

1 Answers

I don't know if it's only made up of the same framework or if you use javascript or jQuery separately.

Both sites seem to use jQuery instead of Materialize.

https://artofwhere.com/

You seem to be using jQuery-menu-aim.

kamens/jQuery-menu-aim
https://github.com/kamens/jQuery-menu-aim

$("#nav").find(">ul").menuAim({
        rowSelector: ">li",
        submenuDirection: "below",
        activate:function(a){
            varb = $(a).find(".subnav";
            b.show(),
            b.data("navTimeout_hide")&(clearTimeout(b.data("navTimeout_hide")),
            b. removeData("navTimeout_hide")),
            b.data("navTimeout_show", setTimeout(function(){
                b. addClass ("hover")
            }, 20))
        },
        deactivate:function(a){
            varb = $(a).find(".subnav";
            b. removeClass ("hover"),
            b.data("navTimeout_show")&(clearTimeout(b.data("navTimeout_show")),
            b. removeData("navTimeout_show")),
            b.data("navTimeout_hide", setTimeout(function(){
                b.hide()
            }, 300))
        },
        exitMenu:function(){
            return!0
        }
    }),

http://emerald.sekizgen.net/

You seem to be using Superfish.

Superfish http://users.tpg.com.au/j_birch/plugins/superfish/

class with sf-menu specified
The superfish.js is loaded just before the body closes tag

It is partly due to my lack of English ability, but I would appreciate it if you could give me some advice.I would appreciate it if you could help me move forward by referring to the template here.

This time, I looked for it as follows.
I hope it will be helpful in the future.
(My browser is Chrome)

https://artofwhere.com/

http://emerald.sekizgen.net/

After checking the elements of the menu in the developer tool, Google search in the sf-menu specified in class

2022-09-30 10:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656