I tried to implement Metro-ui-css 's sidebar.Well in case of display it works but the drop down wont function.I referenced http://metroui.org.ua/sidebar.html.

<head runat="server">
    <title></title>
    <link href="css/metro-bootstrap.css" rel="stylesheet" />
    <link href="css/iconFont.min.css" rel="stylesheet" />

</head>
<body class="metro">
    <form id="form1" runat="server">
        <h2>sidebar</h2>

        <div style="width:220px;">

            <nav class="sidebar light">
    <ul>
        <li class="title">Items Group 1</li>
        <li class="active"><a href="#"><i class="icon-home"></i>Dashboard</a></li>
        <li class="stick bg-red"><a href="#"><i class="icon-cog"></i>Layouts</a></li>
        <li class="stick bg-yellow">
            <a class="dropdown-toggle" href="#"><i class=" icon-tree-view"></i>Sub menu</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="#">Subitem 1</a></li>
                <li><a href="#">Subitem 2</a></li>
                <li><a href="#">Subitem 3</a></li>
                <li class="divider"></li>
                <li><a href="#">Subitem 4</a></li>
                <li class="disabled"><a href="#">Subitem 4</a></li>
            </ul>
        </li>
        <li class="stick bg-green"><a href="#">Thread item</a></li>
        <li class="disabled"><a href="#">Disabled item</a></li>

        <li class="title">Items Group 2</li>
        <li><a href="#">Other Item 1</a></li>
        <li><a href="#">Other item 2</a></li>
        <li><a href="#">Other item 3</a></li>
        <li>
            <a class="dropdown-toggle" href="#">Sub menu 2</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="">Subitem 1</a></li>
                <li><a href="">Subitem 2</a></li>
                <li><a href="">Subitem 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

        </div>

    </form>
</body>


    <script src="Scripts/jquery-2.2.1.js"></script>
       <script src="js/metro/metro-dropdown.js"></script>
    <script src="js/metro.min.js"></script>

</html>

This is the output

enter image description here

As in the pic above the design part works but the drop down wont function.According to the document, the drop-down.js file from metro is needed and i have provided but still wont function.
I find almost no tutorials or demos for the Metro.Please share if you know some nice sites about Metro-ui-css.
Thanks :d

Related posts

Recent Viewed