Jump to content

Webby

Members
  • Content count

    4
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Webby

  • Rank
    Newbie

Profile Information

  • Location
    Canada
  1. <!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>
  2. I need the same thing but for the NEW w3.css (version 4) The nav bar code is much different and so the javascript would need a small updating. I know this would help a great number of people since it is one of the small drawbacks to using w3.css in the "real world"
  3. Combine W3JS and W3CSS

    Yes the framework look pretty but need the javascript "engine" to get it to do any heavy work.
  4. 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
×