Responsive menu does not show

2019-08-14 08:55 Hei.l imported from Stackoverflow

I have created a responsive menu but it doesn't show. I would like to use a hamburger menu button. When it is active (button transform+transition, the hamburger menu icon -> the close icon), the ul will slide out from the right ( background -> opacity.5).

I am not sure which part is erroneous. Do you have any suggestions?

$(document).ready(function() {
  $('#toggle').on("click", function() {
    $("#overlay").toggleClass('active');
    $('#overlay').toggleClass('open');
  });
});

.button-container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
  opacity: 1;
  content: "";
}

.button-container:hover {
  opacity: .7;
}

.top:active {
  transform: translate(11px) translateX(0) rotate(45deg);
}

.middle:active {
  opacity: 0;
}

.bottom:active {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
}

span {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  height: 5px;
  width: 5%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}

.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 5%;
  height: 0%;
  opacity: .6;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
}

li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

li:nth-of-type(2) {
  animation-delay: .4s;
}

li:nth-of-type(3) {
  animation-delay: .45s;
}

li:nth-of-type(4) {
  animation-delay: .50s;
}

nav {
  position: relative;
  height: 70%;
  top: 20%;
  transform: translateY(-50%);
  font-size: 0.8em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

li {
  display: block;
  height: 25%;
  min-height: 50px;
  position: relative;
  opacity: 0;
}

a {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

a:hover {
  transform: scale(1);
}

a:hover:after,
a:focus:after,
a:active:after {
  width: 30%;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: rgba(0, 0, 0, 0.6);
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li><a href="#constellation">Home</a></li>
      <li><a href="#what is constellations?">About</a></li>
      <li><a href="#12 constellations">12 Constellations</a></li>
      <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li>
    </ul>
  </nav>
</div>

2 answers

answered 2019-08-14 09:26 Vikas Jadhav

You need to add visibility:visible to .active class. and also some css modification to show menu bars.

.active {
  visibility: visible;
}

$(document).ready(function() {
  $('#toggle').on("click", function() {
    $("#overlay").toggleClass('active');
    $('#overlay').toggleClass('open');
  });
});

.button-container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
  opacity: 1;
}

.button-container:hover {
  opacity: .7;
}

.top:active {
  transform: translate(11px) translateX(0) rotate(45deg);
}

.middle:active {
  opacity: 0;
}

.bottom:active {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
}

span {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  height: 5px;
  width: 30px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .35s ease;
  cursor: pointer;
}
.middle{
  top:10px;
}
.bottom{
  top:20px;
}
.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 5%;
  height: 0%;
  opacity: .6;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
}

li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}

li:nth-of-type(2) {
  animation-delay: .4s;
}

li:nth-of-type(3) {
  animation-delay: .45s;
}

li:nth-of-type(4) {
  animation-delay: .50s;
}

nav {
  position: relative;
  height: 70%;
  top: 20%;
  transform: translateY(-50%);
  font-size: 0.8em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}

li {
  display: block;
  height: 25%;
  min-height: 50px;
  position: relative;
  opacity: 0;
}

a {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

a:hover {
  transform: scale(1);
}

a:hover:after,
a:focus:after,
a:active:after {
  width: 30%;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: rgba(0, 0, 0, 0.6);
  transition: .35s;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.active {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li><a href="#constellation">Home</a></li>
      <li><a href="#what is constellations?">About</a></li>
      <li><a href="#12 constellations">12 Constellations</a></li>
      <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li>
    </ul>
  </nav>
</div>

answered 2019-08-14 11:53 Lars Gross

I would make a second class for the mobile devices.

<div class="overlay" id="overlay"> // copy //Change Class
  <nav class="overlay-menu"> //copy //Change Class
    <ul>
      <li><a href="#constellation">Home</a></li>
      <li><a href="#what is constellations?">About</a></li>
      <li><a href="#12 constellations">12 Constellations</a></li>
      <li><a href="#How to Find Constellations in the Night Sky?">Stargazing</a></li>
    </ul>
  </nav>
</div>

See also questions close to this topic

Two way associative array
I am trying to create a function compare() which when given an even letter of the alphabet returns the letter of index one below it and when given an odd letter of the alphabet returns the letter of index one above it (up to the letter 'e'). As such:
```
function compare(letter) {
    var arr = {'a':'b', 'b':'a', 'c':'d', 'd':'c', 'e':'f', 'f':'e'}
    return arr[letter]
}
```
The problem is that this array is going to be very long, and I feel like repeating each element in reverse is a bit of a waste. Is there a way of modifying the function so that I can store something like
```
arr={'a':'b', 'c':'d', 'e':'f'}
```
Instead of
```
arr={'a':'b', 'b':'a', 'c':'d', 'd':'c', 'e':'f', 'f':'e'}+
```

JSON-LD created by javascript is not displayed in view-source

There are 'duplicates' to my question but nobody answer my question :(

I am trying to generate JSON-LD structured data with javascript. Everything was fine until I checked from the tool, the JSON-LD code generated by javascript doesn't show up on the test table. When I proceed to view source on chrome it do not display the JSON-LD code.

You can see it live here

The code is below

<script id='myJSONID' type='application/ld+json'></script>
<script type='text/javascript'>
//<![CDATA[
$('#myJSONID').text(function() {
    return JSON.stringify({
        "@context":"https://schema.org",
        "@type":"Review",
        "author": {
            "@type":"Person",
            "name":"Nhà đất Sơn Nghĩa",
            "sameAs":"https://www.nhadatsonnghia.com/"
        },
        "inLanguage":"vi",
        "itemReviewed": {
            "@type":"Product",
            "name": "" + document.title,
            "description":"" + document.getElementsByName("description")[0].content,
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "5",
                "bestRating": "5",
                "ratingCount": "20"
             }
        }
    });
});
//]]>
</script>

Does the above code have any problem? If not then how the JSON-LD code generated by javascript can be displayed when view-source (Ctrl + U)

Any suggestions are appreciated!

Thanks so much!

MouseParallax and classic js transition doesn't work

I have a problem which I can not find any solution: In fact I use the parallax.js library of matthew that allows me to have a parallax effect on a mousemove but when I put a js classic transition to the CSS class parallax becomes ultra slow and buged, how to fix it plz?


<body>
        <div id="fullpage">
                <div class="section">Some section</div>
                <div class="section section-2">
                        <div id="device">
                                <div data-depth="0.2" class="ordi"><img src="./img/ordi.png" alt="ordi"></div>
                                <div data-depth="0.2" class="clavier"><img src="./img/clavier.png" alt="test"></div>
                                <div data-depth="0.2" class="smartphone"><img src="./img/smartphone.png" alt="test"></div>
                        </div>

                </div>
                <div class="section">Some section</div>
                <div class="section">Some section</div>
            </div>
</body>


document.getElementsByClassName('ordi')[0].classList.add('transition-device');
document.getElementsByClassName('clavier')[0].classList.add('transition-device');
document.getElementsByClassName('smartphone')[0].classList.add('transition-device');

var scene = document.getElementById('device');
var parallaxInstance = new Parallax(scene);
console.log(parallaxInstance)




#device img {
    width: 30vw;
}

#device .transition-device{
    top: 0%;
    left: 10%;
    opacity: 1; 
}

.ordi{
    opacity: 0;
    top: -30%;
    left: 10%;
   position: absolute;
   transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}

.clavier{
    opacity: 0;
    top: 20%;
    left: -10%;
   position: absolute;
   transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}

.smartphone{
    opacity: 0;
    top: 20%;
    left: 20%;
   position: absolute;
   transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
}

fabricJS: Scale canvas view

I have converted a pdf to image format using PDF.JS and rendered that to the canvas. While that process the rendered pdf image is showing blurred in the canvas.

I have no idea how to scale the image to some viewable format rather than being so blurred.

Image of the pdf in canvas:

Here in the image you can clearly see that the rendered image is not in readable format!

Here is the fiddle link: https://jsfiddle.net/kjxes63f/

var fabricCanvas;
fabricCanvas = new fabric.Canvas('firtcanvas');

document.querySelector("#pdf-upload").addEventListener("change", function (e) {
    var file = e.target.files[0]
    console.log("pdf evente");
    console.log(e);
    if (file.type != "application/pdf") {
        console.error(file.name, "is not a pdf file.")
        return
    }

    var fileReader = new FileReader();

    fileReader.onload = function () {
        var typedarray = new Uint8Array(this.result);
        console.log("typedarray");
        console.log(typedarray);
        console.log("this.result");
        console.log(this.result);
        PDFJS.getDocument(typedarray).then(function (pdf) {
            // you can now use *pdf* here
            console.log("the pdf has ", pdf.numPages, "page(s).")
            pdf.getPage(pdf.numPages).then(function (page) {
                // you can now use *page* here
                var viewport = page.getViewport(2.0);
                var fabricCanvas = document.querySelector("#firtcanvas")
                fabricCanvas.height = viewport.height;
                fabricCanvas.width = viewport.width;

                page.render({
                    canvasContext: fabricCanvas.getContext('2d'),
                    viewport: viewport
                }).then(function () {

                    bg = fabricCanvas.toDataURL("image/png");

                    fabric.Image.fromURL(bg, function (img) {
                        img.scaleToHeight(800);
                        img.scaleToWidth(600);
                        console.log("img");
                        console.log(img);
                        console.log(bg);
                        var imgCanvas = img.set({ left: 0, top: 0, width: 150, height: 150 });
                        fabricCanvas.add(imgCanvas);

                    });
                });
            });
        });
    };
    fileReader.readAsArrayBuffer(file);
});

Creating Vue.js edit-in-place functionality, need to change div visiblity based on toggling a variable
I am trying to build edit-in-place place functionality into my app. The simplest way I can think of is to have two divs, one which displays the value and the other which displays the value within a form-field. If the user clicks the non-editable version it is replaced with the editable version.

The HTML looks like this:
```
<div class="row" v-for="x in items">
    <div class="col-md-10" v-if="!x.show_name" @click="toggle_show_name(x)">{{x.name}}</div>
    <div class="col-md-10" v-if="x.show_name">
        <input type="text" :value="x.name" class="form-control"/>
    </div>
</div>
```
And the method looks like this:
```
methods: {
    toggle_show_name: function(x){
        x.show_name = !x.show_name
    },
}
```
Note: the x.show_name variable is set after loading the items via an Ajax call.

The first question is, is this possible? I've read that Vue.js won't recompute the v-if condition, and so it won't toggle the divs, but I've also seen similar examples of toggling data visibility that suggest it will work. The second question, if this is possible have I done it right, or is there a mistake in here or is there a better way to do this.
CSS Bootsrap Carousel padding disappearing on slide
I am trying to create a bootstrap carousel and I have it completed but for some reason the padding disappears when the slider slides. You can view it at: https://test.albright.edu/home-copy/ near the "Learn about yourself and the world around you" text. The code I am using to move the slider is:
```
.page-id-39896 .carousel-inner .item.left.active {
  transform: translateX(-33%);
}
.page-id-39896 .carousel-inner .item.right.active {
  transform: translateX(33%);
}

.page-id-39896 .carousel-inner .item.next {
  transform: translateX(33%)
}
.page-id-39896 .carousel-inner .item.prev {
  transform: translateX(-33%)
}

.page-id-39896 .carousel-inner .item.right,
.page-id-39896 .carousel-inner .item.left { 
  transform: translateX(0);
}
```
I am using this to make it not appear as though it is not sliding 3 slides at a time since the normal "slide" bootstrap carousel will slide all three slides at once so i am giving the appearance of only sliding one at a time.
How do I change the weight and color of the border of the Material UI Dialog?
Hello I am trying to add an external frame to the Dialog Box from Material UI. I was trying to do this but nothing happened:
```
overrides: {
  MuiDialog :{
    paper : { 
      borderWidth : 10,
      borderRadius: 10,
      borderColor : "#FFFFFF",
      backgroundColor : "#101010"
    }
}, .......
```
Do you know a way to do by using overrides in the MUI theme?

Thanks
Get rid of default wordpress mobile menu toggle
Cannot figure out how to remove velux theme mobile menu toggle. Aas alternitive im using Mega Max menu. It is possible to turn off mobile toggle in megamenu settings, but its important for me to get rid of default wp mobile menu toggle.
```
#menu-toggle {
    display:none;
}
```
Display:none hides menu completly.

url=https://ibb.co/vjr5xQS
Are there any downsides to hiding sub navigation in a menu using css position absolute offset?
Using the offset technique to hide a nested navigation menu, i.e. giving
```
position : absolute
left : -9999em 
```
to the sub menus and then on hover, change it to left:0;

Code - https://codepen.io/yogesharora28/pen/WNNPQKV

Could there be any potential issues using this way? One thing I noticed is that, using screen readers for accessibility, if you use short cut keys in screen reader, all the links in the sub menu will be coming up in that and you will have to tab through all links in sub menu.

Not sure, if this is desired or not.

Function that reads the file doesn't work. Interactive menu problem

Im having some problems making my newly started project to work (also im a beginner). For some reason option number 4 in my interactive menu doesn't work and just takes a default route (doesn't output whats inside a file (file directory is fine.).

At this point i've read every forum searching for answer but couldn't modify my code in any way that would work. So I decided to ask you for help. Here is my code:

#include <stdio.h>
#include <stdlib.h>
#define kFileLocation "/Users/patrykpiwowarczyk/Desktop/STUDIA/FoCP/Kodowanie/TestProjektSemestralnyAngielski/TestProjektSemestralnyAngielski/authors.txt"

void options();
void start(void);
void score(void);
void optionz(void);
void author(void);

void pexit(void);

    int main(void)
    {
        char ch;
        int num;
        char option;
        while (1) {
            printf("****Your English Learning Index Cards****\n\n");
            printf("Enter 1-5 of the following options: \n\n");
            options();
            scanf("%c", &option);

            switch (option) {
                case '1':

                    break;
                case '2':

                    break;
                case '3':
                    break;
                case '4':
                    author();
                    break;
                case '5':
                    pexit();
                    break;
                default:
                    printf("Please insert number ranging from 1-5 though... No cheating! \n\n");
                    printf("Press ENTER key to Continue\n");

            }


        }
        return 0;
    }

    void options()
    {
        printf("1. Start Game \n");
        printf("2. View Scoreboard \n");
        printf("3. Options \n");
        printf("4. Author \n");
        printf("5. Exit \n\n");
    }

void author()
{

    char c;
    FILE *authorsFile;


    if ((authorsFile = fopen("/Users/patrykpiwowarczyk/Desktop/STUDIA/FoCP/Kodowanie/TestProjektSemestralnyAngielski/TestProjektSemestralnyAngielski/authors.txt","r")) == NULL)
    {
        printf("FAILED to read the file, maybe check directory?\n");
        exit(1);
    }

    while ((c = fgetc(authorsFile)) != EOF)
    {

        printf("%c", c);
    }

    fclose(authorsFile);


}

void pexit()
{

    puts("Your progress has been saved, see you next time.");
    exit(0);
}

if you could help me in any way I would appreciate it soo much..

Greetings, Patryk Piwowarczyk.

PS: the #define kFileLocation is a leftover from my other tries. Omit it.

Picture element for responsive images 2019
Haloo,
It's time to change my website images to responsive image using picture elements BUT usefull for SEO images. I watched many tutorials about the subject and I saw many types and sizes for them thats's why I ask you the folowing:
1. Which kind of code you recomand to use now in 2019?
```
<picture>
    <source srcset="......jpg" type="image/jpg" media="(min-width: ....px)"><br>
    <source srcset="......jpg" type="image/webP" media="(min-width: ....px)"><br>
    <img  src="......jpg" />
</picture>
```
OR
```
<picture>
  <source media="(min-width: ...px)" srcset=".....jpg, ....-2x.jpg 2x">
  <source media="(min-width: ...px)" srcset="......jpg, ....-2x.jpg 2x">
  <img src=".....jpg" srcset="......jpg 2x" alt="......">
</picture>
```
1. What image sizes do you recommend to use, especially most of my website visitors use cell phones (samsung) and the following laptops, tablets etc? (200,480,1080,2180 px) or (576, 768,992,1200 px)? I think i have to use a minimum of images because the risk of my lazy loud of my website.
  3.One detail: I use Bootstrap 4 on my site (maxcdn.bootstrapcdn.com)
2. Is it good the following tool to make responisve my image or can you recomand another one? https://www.responsivebreakpoints.com/
Your php idiot.

Make table columns collapse on mobile view

Here is what I'm trying to accomplish:

I have 4 photos in a row with text below each one. I'm trying to make it so on mobile view, the photos are on top of each other instead of side by side. Right now I have them in a table. As can be seen in the link below, on a mobile phone, 2 of the pictures are cut off.

Example

        <table style="text-align:center; width: 100%;">
          <tr>
            <th><center><img src="images/SheriffPrice (2).jpg" width="200" height="186"></center></th>
            <th><center><img src="images/CaptKirby.jpg" width="200" height="186"></center></th>
            <th><center><img src="images/LtKettner.jpg" width="200" height="186"></center></th>
            <th><center><img src="images/LtHickman.jpg" width="200" height="186"></center></th>
          </tr>
          <tr>
            <td>Sheriff John F. Price IV</td>
            <td>Captain J. Brian Kirby</td>
            <td>Lieutenant Harry A. Kettner</td>
            <td>Lieutenant Dennis Hickman</td>
          </tr>
          <tr>
            <td>Sheriff</td>
            <td>Undersheriff</td>
            <td>Patrol Commander</td>
            <td>Criminal Investigation Commander</td>
          </tr>
            <tr>
            <td>Office: 410-778-2279</td>
            <td>Office: 410-778-2279</td>
            <td>Office: 410-778-2279</td>
            <td>Office: 410-778-2279</td>
          </tr>
              <tr>
            <td>Cell: 410-708-0607</td>
            <td>Cell: 410-708-6069</td>
            <td>Cell: 302-547-9265</td>
            <td>Cell: 443-480-3897</td>
          </tr>
                <tr>
            <td>jprice@kentgov.org</td>
            <td>bkirby@kentgov.org</td>
            <td>hkettner@kentgov.org</td>
            <td>d

    hickman@kentgov.org</td>
      </tr>
    </table>

I'm sure what I have isn't close to right, because I'm not sure where to start. If anyone has a better idea then a table to do this, please tell me. Thank you!

Trouble making form responsive on mobile

I have a form embedded on a SquareSpace site. I would like to make the form responsive on mobile devices. This is what I have tried:

@media only screen and (max-width:320px) {
  table.infusion-field-container {
   max-width:250px !important;
  }
  }

@media only screen and (max-width:320px) {
 button {
   max-width:250px !important;
   position: relative;
    top: 50%;

  }
  infusion-submit {
    text-align: center;
}
}

@media only screen and (max-width:320px) {
  tbody.infusion-field-container {
        max-width:250px !important;
  }
}

The form is on this page https://www.soulspacehealers.uk/

Should I be using max-width or min-width?

thanks, David

Related questions

Responsive menu does not show

2 answers

See also questions close to this topic