Jump to content

Webby

Members
  • Posts

    4
  • Joined

  • Last visited

Profile Information

  • Location
    Canada

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Webby's Achievements

Newbie

Newbie (1/7)

0

Reputation

  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. 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
×
×
  • Create New...