Mobilefirst megamanu

HTML-CSS
1 
<!-- at refresh jquery not working layout changed-->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
ul li{list-style-type: none;}
	.dv1{
    	width:100%;
        height:50px;
        background:green;
	/*	*/
    }
    .dva,.dvb,.dvc,.dvd{
    	width:100%;
        height:150px;
        background:lightgreen;
        margin-top:0;
    }
    .article{
    	width:24%;
        background:pink;
        border: 1px solid red ;
		display:inline-block;
    }
	span{display:block;}
	.item{display:none;}	
	.btn1a, .btn1b{width:100%;}
	
	@media only screen and (max-width: 600px) {
       span{display:none}
	   .article{display:block;
				/* overflow-y:hidden;
				height:70px;*/
				}
		.item{display:block;}		
	   }
	
</style>
</head>
<body onresize="myFunction()">

<p>Try to resize the browser window to display the windows height and width.</p>

<p id="demo"></p>
<div class="article">
<div class="dv1"><button class="btn2a">Slide down Drinkss</button></div>
<div class="dva">
	<h3>List of Drinks:</h3>
      <ul>
        <li><span>Coffee</span><button class="btn1a item">Coffee</button></li>
        <li><span>Tea</span><button class="btn1a item">Tea</button></li>
        <li><span>Coca Cola</span><button class="btn1a item">Coca Cola</button></li>
      </ul>
      
</div>
<button class="btn1a">Slide up</button>
</div>
<div class="article">
<div class="dv1"><button class="btn2b">Slide down Alcohols</button></div>
<div class="dvb">
	<h3>List of Alcohols:</h3>
      <ul>
        <li><span>Beer</span><button class="btn1b item">Beer</button></li>
        <li><span>Vine</span><button class="btn1b item">Vine</button></li>
        <li><span>Spirits</span><button class="btn1b item">Spirits</button></li>
      </ul>
      
</div>
<button class="btn1b">Slide up</button>
</div>
<div class="article">
<div class="dv1"><button class="btn2c">Slide down Alcohols</button></div>
<div class="dvc">
	<h3>List of Drinks:</h3>
      <ul>
        <li>Coffee<button class="btn1c">Slide up</button></li>
        <li>Tea<button class="btn1c">Slide up</button></li>
        <li>Coca Cola<button class="btn1c">Slide up</button></li>
      </ul>
      
</div>
<button class="btn1c">Slide up</button>
</div>
<div class="article">
<div class="dv1"><button class="btn2d">Slide down Alcohols</button></div>
<div class="dvd">
	<h3>List of Alcohols:</h3>
      <ul>
        <li>Beer</li>
        <li>Vine</li>
        <li>Spirits</li>
      </ul>
      
</div>
<button class="btn1d">Slide up</button>
</div>
<!--
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>-->
<script>
$(document).ready(function(){
  
});
function myFunction() {
  let w = window.outerWidth;
  let h = window.outerHeight;
  let txt = "Window size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
  //if ($(window).width()>799){$(".btn1a").hide();
//  }
  
  if (w<600){
   $(".dva").hide();
   $(".dvb").hide();
   $(".dvc").hide();
   $(".dvd").hide();
   
   $("span").hide();
   
   $(".btn1a").show();
   $(".btn2a").show();
   $(".btn1b").show();
   $(".btn2b").show();
   $(".btn1c").show();
   $(".btn2c").show();
   $(".btn1d").show();
   $(".btn2d").show();
   
   $(".btn1a").click(function(){
    $(".dva").slideUp();
    
   });
   $(".btn1b").click(function(){
    
    $(".dvb").slideUp();
   });
   
   $(".btn1c").click(function(){
    
    $(".dvc").slideUp();
   });
   
   $(".btn1d").click(function(){
    
    $(".dvd").slideUp();
   });
   
  $(".btn2a").click(function(){
    $(".dva").slideDown();
    
  });
  
  $(".btn2b").click(function(){
    
    $(".dvb").slideDown();
  });
  $(".btn2c").click(function(){
    
    $(".dvc").slideDown();
  });
  $(".btn2d").click(function(){
    
    $(".dvd").slideDown();
  });
  
  $(".article").css("display","block");
  }
  else{
   $(".dva").show();
   $(".dvb").show();
   $(".dvc").show();
   $(".dvd").show();
   
   $("span").show();
   
   $(".btn1a").hide();
   $(".btn2a").hide();
   $(".btn1b").hide();
   $(".btn2b").hide();
   $(".btn1c").hide();
   $(".btn2c").hide();
   $(".btn1d").hide();
   $(".btn2d").hide();
   $(".article").css("display","inline-block"); 
   //$(".btn2").css("display","inline");   
  }
}
</script>

</body>
</html>
2

Do you have a question?

3

yes please
as I refresh the layout changing and jquery stop working on mobile level

4

I think you want innerWidth not outerWidth

Not sure if it is intended that the buttons are never set to show again above 600?

5

thank you for replay.
I understand that but at the moment I have no idea how to do that. that is what I try to figure out and any help comes good, thank you frank

6

Do what, fix the buttons, or correct the code to use innerWidth?

let w = window.innerWidth;

I mean looking at the code I assume it is intentional that the buttons are hidden. But then you might as well just hide them by default (from the start) and only show them inside the w < 600 condition.

As an aside, I would also suggest a loop if you just want to hide/show all buttons (or give them a shared class name you can use).

$('button').each((index, element) => {
  $(element).show();
  // or 
  // $(element).hide();
});
7

thank you for the replay. if the window width is smaller than 600px the ‘menu cards’ should be hidden but with control buttons, if the window width is bigger than 600px buttons should disappear, they are not needed at that width.

8 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btna1").click(function(){
    //alert("The paragraph was clicked.");
    $("#dva").css("display","none");
   
  });
  $(".btnb1").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvb").css("display","none");
    
  });
  $(".btnc1").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvc").css("display","none");
   
  });
  $(".btnd1").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvd").css("display","none");
    
  });
  
  
  $(".btna").click(function(){
    //alert("The paragraph was clicked.");
    $("#dva").css("display","block");
  });
  $(".btnb").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvb").css("display","block");
  });
  $(".btnc").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvc").css("display","block");
  });
  $(".btnd").click(function(){
    //alert("The paragraph was clicked.");
    $("#dvd").css("display","block");
  });
  
   $(window).resize(function(){
    if($(window).width()>640){$("#dva").css("display","block")}
    else{$("#dva").css("display","none");};
  });
  $(window).resize(function(){
    if($(window).width()>640){$("#dvb").css("display","block")}
    else{$("#dvb").css("display","none");};
  });
  $(window).resize(function(){
    if($(window).width()>640){$("#dvc").css("display","block")}
    else{$("#dvc").css("display","none");};
  });
  $(window).resize(function(){
    if($(window).width()>640){$("#dvd").css("display","block")}
    else{$("#dvd").css("display","none");};
  });
  
  $(window).resize(function(){
    if($(window).width()>640){$(".btna1").css("display","none")}
    else{$(".btna1").css("display","block");};
  });
  $(window).resize(function(){
    if($(window).width()>640){$(".btnb1").css("display","none")}
    else{$(".btnb1").css("display","block");};
  });
   $(window).resize(function(){
    if($(window).width()>640){$(".btnc1").css("display","none")}
    else{$(".btnc1").css("display","block");};
  });
  $(window).resize(function(){
    if($(window).width()>640){$(".btnd1").css("display","none")}
    else{$(".btnd1").css("display","block");};
  });
});
</script>
<style>
ul li {list-style-type:none;}
h2.a {
  visibility: visible;
}

h2.b {
  visibility: hidden;}
  
.item{  width:24%;
		height:auto;
		display:inline-block;
        background:pink;
        border:2px solid red;}

.dv1{width:100%;
	 height:50px;
     background:green;}
.dv2{width:100%;
	 height:170px;
     background:lightgreen;
     display:block}
     
.btna, .btnb, .btnc, .btnd{display:none;}     
.btna1, .btnb1, .btnc1, .btnd1{display:none;}    
     
@media only screen and (max-width: 640px) {
  .item{  min-width:43%;
		height:auto;
		display:block;
        background:pink;
        border:2px solid red;}    
.dv2{width:100%;
	 min-height:170px;
     background:lightgreen;
     display:none;}
.btna, .btnb, .btnc, .btnd{display:block;}     
.btna1, .btnb1, .btnc1, .btnd1{display:block;}    
</style>
</head>
<body>

<h1>The megamenu</h1>

 
<div class="item">
<div class="dv1">
<button class="btna">button</button>
</div>
<div id="dva" class="dv2">
<button class="btna1">button</button>Items
	<ul class="">
      <li>Coffee,</li>
      <li>Tea</li>
      <li>English Tea</li>
      <li>Orange</li>
      <li>Coca Cola</li>
    </ul>
</div>

</div>

<div class="item">
<div class="dv1">
<button class="btnb">button</button>
</div>
<div id="dvb" class="dv2">
<button class="btnb1">button</button>Items
	<ul class="">
      <li>Banana</li>
      <li>Appel</li>
      <li>Pineapple</li>
      <li>Orange</li>
      <li>Dates</li>
    </ul>
</div>

</div>
<div class="item">
<div class="dv1">
<button class="btnc">button</button>
</div>
<div id="dvc" class="dv2">
<button class="btnc1">button</button>Items
	<ul class="">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
</div>

</div>
<div class="item">
<div class="dv1">
<button class="btnd">button</button>
</div>
<div id="dvd" class="dv2">
<button class="btnd1">button</button>Items
	<ul class="">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
</div>

</div>

</body>
</html>
```this is an updated version please have a look thank you
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.