Implement Bootstrap Navbar Toggle Menu in ASP.Net

ASPBoy
 
on Nov 21, 2022 04:40 AM
242 Views

Dear sirs,

Thank you for a very nice site!

In the sample code Implement Bootstrap Navbar Toggle Menu in ASP.Net - I would like to add one or more dropdown menus next to each other. 

Thank you in advance

Regards, Lennart

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Nov 21, 2022 05:15 AM
on Nov 21, 2022 05:17 AM

Hi ASPBoy,

Please refer below Sample Demo.

HTML

<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        nav ul li { padding: 10pt; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">ASPSNIPPETS</a></li>
                <li class="nav-item"><a class="nav-link" href="#">ASPFORUMS</a></li>
                <li class="nav-item dropdown" >
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown Menu1</a>
                    <div class="dropdown-menu" >
                        <div><a class="dropdown-item" href="#">Sub Menu 1</a></div>
                        <div><a class="dropdown-item" href="#">Sub Menu 2</a></div>
                        <div><a class="dropdown-item" href="#">Sub Menu 3</a></div>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown  Menu2</a>
                    <div class="dropdown-menu">
                        <div><a class="dropdown-item" href="#">Sub Menu 1</a></div>
                        <div><a class="dropdown-item" href="#">Sub Menu 2</a></div>
                        <div><a class="dropdown-item" href="#">Sub Menu 3</a></div>
                    </div>
                </li>
            </ul>
        </nav>
    </form>
</body>
</html>

Demo