Cannot get Metro UI navigation bar dropdown to work

[vkurpad]

I'm having trouble getting the navigation bar to work. I'm using Jquery ver 2.1.1. I've validated that jquery is working (added a little alert for window load). The navigation bar itself is rendering, but the dropdown just does not work. I'm using Visual Studio and installed the package via nuget.

JS Files included:
metro.min.js
jquery-2.1.1.js

CSS Files:
metro-bootstrap.css
metro-bootstrap-responsive.css

Please help.

[olton]

<li>
<a class="dropdown-toggle" href="#">Products</a>
<ul class="dropdown-menu" data-role="dropdown">
<li><a href="#">Windows 8</a></li>
<li><a href="#">Skype</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Office</a></li>
</ul>
</li>

[vkurpad]

Sergey, Thanks for the response. I was not specific enough on my question. I have the template working for the most part, its only the dropdown that does not show up. I have the HTML snippet you shared included on the nav bar, but on the mouse over or click the drop down menu does not show.
Please look at http://photoburst-dev.azurewebsites.net/ as an example of the problem I describe. I have your HTML snippet on the menu, but the drop down still does not show.

[ratones]

I also have this problem.
I have copied the code from the docs into my html.
Strange thing is that the examples in docs folder works fine, but even if I include the same minified js, still doesn't work. Any thought?

[ratones]

Well, the dilema it's solved. In the docs examples, there is a function called "reinit" in docs.js file. This function calls $.Metro.initDropdowns(). If I comment this, the examples also stop working.
As a workaround, I added this call in my page and it works. I'm not sure this is a bug or it's just the way it should be...

[vkurpad]

Thanks @ratones . I need to give it a try.

[bruno4eva]

am having the same problem. drop downs dont work and the navbar dropdown on small view port is not working too.
files added are

<script src="js/jquery.js"></script>

        <script src="js/docs.js"></script>
        <script src="min/metro.min.js"></script>

[native93]

Same problem. The code in docs dosen't work !

[bruno4eva]

I once uncounted the same problem and this is how i solved it.
From the docs folder after you have download the package, maintain the main folder directory( js,css,fonts) and use the structure in this example " template-any.html "...
It will work jux fine. http://afrawoma.a78.org is ma current site am working on.

[olton]

please read this http://metroui.org.ua/requirements.html

[native93]

Hey, thanks for the response. I used this order but still coudn't get through this. :/

            <link rel="stylesheet" href="css/metro-bootstrap.css" >
            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/metro-bootstrap-responsive.css">
            <link rel="stylesheet" href="min/iconFont.min.css" >
            <link rel="stylesheet" href="css/docs.css" >

            <script src="js/jquery-2.1.1.min.js"></script>
            <script src="js/jquery.widget.min.js"></script>
            <script src="js/jquery.mousewheel.js"></script>
            <script src="min/metro.min.js"></script>

[samscudder]

Do you have a sample page to look at?

[olton]

Sample page please

[bruno4eva]

How can the tiles be made responsive

--- Original Message ---

From: "Sergey Pimenov" notifications@github.com
Sent: October 3, 2014 12:06 PM
To: "olton/Metro-UI-CSS" Metro-UI-CSS@noreply.github.com
Cc: "bruno4eva" bruno4eva@live.com
Subject: Re: [Metro-UI-CSS] Cannot get Metro UI navigation bar dropdown to work (#574)

please read this http://metroui.org.ua/requirements.html

---

Reply to this email directly or view it on GitHub:
#574 (comment)

[ketan-chawda]

No idea why Drop-down is not working.

I included

script('js/jquery-2.1.1.min.js')
script('js/jquery-ui.min.js')
script('/js/jquery.widget.min.js')

style('css/jquery-ui.css')
style('css/jquery-ui.theme.css')

style('css/metro-bootstrap.min.css')
style('css/metro-bootstrap-responsive.min.css')
style('css/iconFont.min.css')
script('/js/metro.min.js')
script('/js/metro-calendar.js')
script('/js/metro-datepicker.js')
script('/js/metro-dropdown.js')

[olton]

metro.min.js includes all js metro components. Check your main container for class metro. If your build dropdown from ajax, set global variable METRO_AUTO_REINIT to true

[ketan-chawda]

Yes, my Body tag have metro class. Also should I comment-out metro-dropdown.js now?

body class="metro

div class="container"
....
....

nav class="sidebar dark"

• Summary

<li class="stick bg-grey">
    <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Project</a>
    <ul class="dropdown-menu" data-role="dropdown">
        <li><a href>(Report-1)</a></li>
        <li><a href>(Report-2)</a></li>
   </ul>
</li>

</ul>

/nav

...
....

[olton]

js debug please

[ketan-chawda]

Hi no error on console.

In short it is not toggling.
It should do "style="display: block;" and "style="display: none;"

So I think the fact is, it is not able to apply JS to that element which is

[geekgopala]

Everything is working fine when all my webpages are in the root folder. when I moved one of my webpage to a sub-folder many things are not working like

1. Dropdown-toggle on the top header
2. Accordin frame content

[mativer]

No idea to resolve the problem ? I still can't use the dropdown (i'm using the last version of Ruby on Rails, and all other components are up-to-date).

[SunDi3yansyah]

make sure all the components you have input into the head

provide the code you use?

[aureo91]

To solve this problem, I remplace

src="js/load-metro.js
By

src="js/metro.min.js
and now it works fine.
Thanks to Sergey for this great job !

[AVONnadozie]

I do have this issue of drop-down menu not working too, but only when I move a file out of the root folder. I've tried different ideas but none has worked so far. I always end up putting the file back into the root folder (against the initial project design).
My head tag has the same format as that in docs/examples.html

[davidjackson148]

You have to have all your files in the root folder or the navbar drop downs wont work.

Non navbar dropdowns work anywhere.

Only the docs css/js versions work. The other versions do not

There are some hard paths in some files somewhere that I cannot fine

[davidjackson148]

In load-metro.js there are some relative paths. Change them to absolute paths and the changes will be picked up no matter where your code is

[thilinapiy]

add this : <script src="js/metro/metro-dropdown.js"></script>

[DeanisRusmaniar]

@thilinapiy doens't works!

[fngatia]

I done same as:
aureo91 who commented on Feb 28

thus:
To solve this problem, I REPLACED

src="js/load-metro.js

WITH

src="js/metro.min.js
and now it works fine.
Thanks to Sergey for this great job !

Thanks so much..

[AVONnadozie]

Yes, I confirmed it as well, the suggestion by aureo91 does work but I hope the js/load-metro.js script removal does not affect the functionality of the library.

[fngatia]

Remember olton commented on Dec 5, 2014 and said metro.min.js includes all js metro components...
Its Versa. This is the main library.

[AVONnadozie]

Ok. Actually, a look into js/load-metro.js shows that the script actually inserts js/metro.min.js to the head tag if the document's host name does not contain ".dev" or "modernui". In essence, the bug comes from line 5 of load-metro.js file which appends metro.min.js to head tag assuming the js directory is in the root directory i.e. "js/metro.min.js" instead of something like "path-to-js-directory/js/metro.min.js"