Issue with the Dropdown menu in Metro UI CSS - not functioning properly

I have integrated the METRO UI CSS into my project and created a dropdown menu. The design looks great, but unfortunately, the dropdown list is not appearing as expected.

To implement this feature, I followed the example provided on the following link:

Horizontal menu with dropdown.

In order to add this functionality to my HTML code, I included the necessary files from the latest version of METRO UI CSS package.

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

<!-- Load JavaScript Libraries -->
<script src="metroui/js/metro-dropdown.js"></script>
<script type="dropdown.js"></script>
<script src="metroui/docs/js/jquery/jquery.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script>
<script src="metroui/docs/js/prettify/prettify.js"></script>
<script src="metroui/docs/js/holder.js"></script>

<!-- Metro UI CSS JavaScript plugins -->
<script src="metroui/docs/js/load-metro.js"></script>

If anyone has any insights or suggestions on how to resolve this issue, I would greatly appreciate it!

jqueryhtmlcsswindows-8metro-ui-css

Answer №1

Give this a try - it's currently functioning perfectly for me:

<script src="Scripts/jquery-2.1.3.min.js"></script> 
<script src="Scripts/jquery-ui.min.js"></script> 
<link href="Scripts/metro-ui/css/metro-bootstrap.css" rel="stylesheet" />
<link href="Scripts/metro-ui/css/metro-bootstrap-responsive.css" rel="stylesheet" />
<link href="Scripts/metro-ui/css/iconFont.css" rel="stylesheet" />
<script src="Scripts/metro-ui/js/jquery.min.js"></script>
<script src="Scripts/metro-ui/js/jquery.widget.min.js"></script>
<script src="Scripts/metro-ui/js/jquery.mousewheel.js"></script>
<script src="Scripts/metro-ui/js/metro.min.js"></script> </pre>

Additionally, be sure to include class="metro" in your <body> tag like so: <body class="metro">

I hope this solution proves helpful.

Answer №2

Navbar dropdowns are limited to files in the root folder. Only the css/js located in the docs folder functions correctly. All other file combinations have been attempted without success. It is imperative to keep all files in the root folder for the navbar drop downs to work.

Non-navbar dropdowns, on the other hand, can function anywhere within the project structure.

It has been observed that only the css/js versions from the docs directory are operational. The alternative versions do not provide the intended functionality.

UPDATE:

In load-metro.js, it is necessary to modify the path from relative to absolute.

$(function(){
    if ((document.location.host.indexOf('.dev') > -1) || (document.location.host.indexOf('modernui') > -1) ) {
        $("<script/>").attr('src', '/docs/js/metro/metro-loader.js').appendTo($('head'));
    } else {
        $("<script/>").attr('src', '/docs/js/metro.min.js').appendTo($('head'));
    }
})

Answer №3

Message from the author:

The metro.min.js file contains all JavaScript components for Metro UI. Make sure to check the main container for the 'metro' class. If you are using dropdowns loaded via AJAX, set the global variable METRO_AUTO_REINIT to true. More information can be found here: https://github.com/olton/Metro-UI-CSS/issues/574

I have added this code to the header tag and it is working properly.

<script src="metroui/docs/js/load-metro.js"></script>
<script>var METRO_AUTO_REINIT = true;</script>

Answer №4

If you want to implement Metro UI, make sure to include jQuery before adding Metro UI.

<!-- Load JavaScript Libraries -->
<script src="metroui/docs/js/jquery/jquery.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.widget.min.js"></script>
<script src="metroui/docs/js/jquery/jquery.mousewheel.js"></script>
<script src="metroui/js/metro-dropdown.js"></script>
<script src="dropdown.js"></script>
<script src="metroui/docs/js/prettify/prettify.js"></script>
<script src="metroui/docs/js/holder.js"></script>

Answer №5

Have you executed it on a server? Make sure to place it in the htdocs folder of a server such as XAMPP or WAMP.

If you simply "Double click" to run it, the links will appear as:

file:///C:/xampp/htdocs/Metro-UI-CSS-master/docs/navbar.html

However, running it on a server will show the links like:

http://localhost/Metro-UI-CSS-master/docs/navbar.html

Which method are you using?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

showcasing extensive information in asp.net data tables

I am seeking alternative methods for displaying data in a gridview with approximately 500 - 1000 rows. The ideal grid should allow for keyboard navigation, so I have implemented jQuery functions to support this feature. However, upon loading 500 rows into ...

jquerygrid

Having issues with jQuery append() function not working when concatenating strings

(See complete code below) This specific part of the code $('#' + id).parent().append('<div id="pop-up">hello</div>'); functions correctly. However, when I attempt to use this alternative approach $('#' + id).p ...

jqueryhtmlappendstring-concatenation

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

csshtml-lists

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...

htmlcssflexbox

Exploring the mechanics of JavaScript and jQuery Ajax: What's the secret to its function

It's common knowledge that browsers are single-threaded, meaning they can only either render the UI or execute Javascript snippets. While web workers offer a way to achieve multi-threading, let's focus on the default behavior. I'm curious a ...

javascriptandroidjqueryajax

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

javascriptcssreactjstypescriptmaterial-ui

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

After coding, I noticed that my ng-click function is not working. When I inspected the element, I couldn't find ng-click displayed anywhere. Can someone please help me figure out what I'm doing wrong? var app = angular.module('myApp' ...

javascriptangularjshtmlangularjs-controllerng-bind-html

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format. let _columns = []; let commonStyle = {"width":"20 ...

javascriptcssarraysreactjs

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...

cssvue.jsinput-field

Adding and removing form fields in a table dynamically using AngularJS

I need to dynamically add multiple form fields when a button is pressed, and I want all the fields to be displayed in a table format (each field should have its own space in a <td>field</td> structure). Currently, I am facing an issue where if ...

javascripthtmlangularjsforms

Utilizing a dynamically created table to calculate the number of neighbors

I have a challenge where I want to create a minesweeper game with numbers indicating how many bombs are nearby. For example, if there are two bombs next to each other and I click on a cell adjacent to them, it should display the number 2. Likewise, if ther ...

javascriptphpjqueryminesweeper

`The search bar and search button`

On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...

phphtmlcss

Preventing Event Bubbling: StopPropagation not Successful in Disabling Anchor Tags within Parent Elements

Currently, my objective is to alter the color of a child element upon clicking it. However, the parent element redirects to another page. I attempted using stopPropogation without success. Below is the jQuery code snippet I am working with: $('.child ...

jqueryclickstoppropagation

Using knockout to retrieve the attribute value with an onClick event

Snippet of HTML View with attribute value 'Qref'. This is the sample HTML Code for binding Currently, I have manually inputted the Qref Attribute value <!--ko if:$parent.Type == 2 --> <input type="checkbox" data-bind="attr:{id: $data ...

javascriptjqueryknockout.js

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

How can I centrally align the text(link) vertically in relation to its background image?

After setting the background color, height, and width of a link using CSS, I managed to align the text(link) center horizontally by applying the "text-align: center" property. However, I am facing difficulty in vertically centering it with respect to its ...

htmlcss

JSON parsing problem in web browsers

I've been working on an application using Asp.net MVC. When I submit the form using jQuery: var Data = $("#frmForgotPassword").serialize(); $.post("<%= Url.Action("ForgotPassword","Account") %>/", Data, function(retdata, textStatus) { if ( ...

jqueryasp.net-mvcjquery-post

Exploring Bing Maps with JavaScript: Implementing Infobox opening functionality upon clicking PushPin

I've been experimenting with the sample code provided on the Bing SDK site, and I'm facing an issue with getting the click event to work with pushpins that are added in a JavaScript .each loop. The loop pulls in longitude and latitude coordinates ...

jqueryasp.net-mvcbing-maps

Flask application encountering issue with POST method - Error 404 detected

I'm in the process of developing a straightforward Flask application to run a web app that connects to a Postgres database. However, I'm encountering an issue where the POST method doesn't seem to function correctly when I click the submit ...

pythonhtmlpostgresqlflaskflask-sqlalchemy

Does CSS include a shadow child operator?

Did you know that Google Chrome has a special feature called the shadow descendant combinator /deep/? This unique combinator allows for the selection of elements within shadow nodes. body div {...} // this doesn't target descendant divs inside shadow ...

cssgoogle-chromecss-selectorsshadow-dom