Jump to content

ScotBlue

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by ScotBlue

  1. Lol. That's a good way of putting it. I've included the toggle code in the function above, and it seems to have done the trick, Thanks @dsonesuk <script> function myFunction(x) { x.classList.toggle("change"); var x = document.getElementById('mob-menu'); if (x.style.display === 'block') { x.style.display = 'none'; } else { x.style.display = 'block'; } } </script>
  2. Evening, I have very, very limited knowledge of javascript, and I've run into a problem I can't seem to resolve. I have an animated hamburger menu, which when clicked/tapped shows a div (that is later to contain an accordion menu). The toggle on/off script works fine, but whenever I add the script to animate the hamburger menu, it seems to override the toggle on/off script and does not work. Can anyone please steer me in the right direction or offer some advice on where I am going wrong. Many thanks. <head> <meta charset="utf-8"> <style> #mob-menu { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top:20px; } .container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; } </style> </head> <body> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <div id="mob-menu"> Accordion menu goes here </div> <script> function myFunction() { var x = document.getElementById('mob-menu'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } </script> <script> function myFunction(x) { x.classList.toggle("change"); } </script> </body>
  3. That's great. Thank you for clearing that up.
  4. I've been building my website for the first time using w3.css 4 - which I think is brilliant by the way. Makes things so much quicker. However, I've been wondering... when building a drop-down menu (like below) is there any requirement to include <ul> and <li> tags, even though the menu works and displays perfectly just using the w3 classes. I am guessing that it's most prob good practice to include the <ul> tags for search engine crawling purposes, but if anyone can shed any light on whether the these tags are actually required, I would appreciate it. Cheers. <!-- From https://www.w3schools.com/w3css/w3css_dropdowns.asp --> <div class="w3-dropdown-click"> <button onclick="myFunction()" class="w3-button w3-black">Click me</button> <div id="Demo" class="w3-dropdown-content w3-bar-block w3-card-4 w3-animate-zoom"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div> </div>
  5. Sorry, cancel. Just discovered that Font Awesome library works alot better with w3.css For future reference, should anyone having same problem... https://www.w3schools.com/icons/icons_reference.asp
  6. Does anyone have any suggestions, or can help me with the following please: I am using w3.css for the first time, but I am struggling to line-up google icons with the text (using the w3-bar-item and w3-button classes) in my navigation bar. I have tried adding my own css (relative positioning, padding-bottom/top, and even changing the font size of both icon and text) but nothing seems to work. I have also gone through w3 references, but can't find the appropriate class that might make the icons and text line up properly. Any help would be very much appreciated. <div id="topnav1" class="w3-bar"> <a href="#" class="w3-bar-item w3-button"><i class="material-icons" style="font-size:23px;color:#272828;">phone_iphone</i>01382 339 605</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">directions_bus</i>Minibus Hire</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">build</i>Autocare</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">mail</i>Contact Us</a> <a href="#" class="w3-bar-item w3-button w3-hide-small"><i class="material-icons" style="font-size:23px;color:#272828;">navigation</i>Visit Us</a> <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="myFunction()">MENU &#9776;</a> </div> <div id="topnav2" class="w3-bar-block w3-hide w3-hide-large w3-hide-medium"> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>
×
×
  • Create New...