Jump to content

ScotBlue

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by ScotBlue

    Toggle on/off script problems

    in JavaScript

    Posted

    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>

     

    Toggle on/off script problems

    in JavaScript

    Posted

    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>

     

    w3.css nav menus and ul & li tags

    in HTML/XHTML

    Posted

    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>

     

    w3-bar-item not lining up with icons

    in CSS

    Posted

    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...