Dileep.in Posted July 25, 2017 Share Posted July 25, 2017 Started using w3.CSS few days back and it is very easy to understand and use as compared to any other frameworks. Congratulations to the team behind the framework. Please provide sample code for W3.CSS Navigation Bar with multi level menu with options for Icons, Separators & disabled menu items. Thanks & Regards Dileep Link to comment Share on other sites More sharing options...
Webby Posted August 22, 2017 Share Posted August 22, 2017 I would also suggest the addition of some javascript snippet for 2 or more dropdown menus in the nav bar. Every example uses only one and they need one nav bar with everything included. I love the framework. Thanks Mike Link to comment Share on other sites More sharing options...
Webby Posted August 23, 2017 Share Posted August 23, 2017 <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <div class="w3-container"> <h2>Navigation Bar with Dropdown</h2> <p>Add a dropdown menu inside the navigation bar:</p> <div class="w3-bar w3-light-grey"> <a href="#" class="w3-bar-item w3-button"> <i class="fa fa-home"></i> Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <div class="w3-dropdown-hover"> <button class="w3-button">Dropdown</button> <div class="w3-dropdown-content w3-bar-block w3-card-4"> <!-- Navbar dropdown with icon --> <a href="#" class="w3-bar-item w3-button"><i class="fa fa-cloud"></i> Link 1</a> <!-- Navbar dropdown separator --> <hr style="width:100%; height:1px; background-color:rgb(0, 0, 0)"> <!-- Navbar dropdown disabled --> <a href="#" class="w3-bar-item w3-button w3-text-gray w3-hover-text-gray">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now