My mobilefirst megamenu

HTML & CSS
1 
<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;
    }
	.btn1a{width:100%;}
</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">Coffee</button></li>
        <li><span>Tea</span><button class="btn1a">Tea</button></li>
        <li><span>Coca Cola</span><button class="btn1a">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>Beer</li>
        <li>Vine</li>
        <li>Spirits</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<800){
   $(".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

Is there a question, or is this just a “look what I did” type of post?

Curious minds want to know…:shifty:

If it’s a look what I did, might I suggest a quick codepen to make it easy for everyone to see?

3 Likes
3

And if so, can the question be “how do i do this without calling the same method 20 times in a row”?

1 Like
4

Hi
I am sorry I did not find the option for explication. after two year I forgot a lot. I tried to build mobile first megamenu but as I refreshed it I lost all jquery settings. as I resize the window everything is back. this is where I need help please. If I refresh everything should stay as supposed to be, like resizing window. thank you fran

5

Hi
also there is another problem. the divcontaining a list slides down making a gap thatI do not understand. how can get ridof that gap? and make sliding div to stay right away after the ‘title bar’ div? So my questions are the previosly mentioned refresh problem and the current one, thank you , frank

6

anotherthing do I need codepen link or the posted code will do. thank you.

7

You don’t need it, but making people copy/paste your page lessens the chance you might get help.

8

I am sorry I made mistake, after two year forgot how to do properely. can you help me please?I see ’ ', </>, arrow up. which one is the right one? thank you

9

Here is a simplified non javascript example…

Full Page View
https://codepen.io/Snady_Leiby/full/GRPqZeL

Editor View
https://codepen.io/Snady_Leiby/pen/GRPqZeL

1 Like
10

thank you that is lovely, that is amazing