• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Responsive burger menu

Community Beginner ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

hi, everyone Im a first-timer on Dreamweaver and i wanted to make a burger menu..im using jquery. everything works but the menu dropping and showing the options. please can someone help me out?

 

 

 

 

 

 

 

Screenshot 2020-09-15 at 21.29.20.pngScreenshot 2020-09-15 at 21.29.33.pngScreenshot 2020-09-15 at 21.29.48.pngScreenshot 2020-09-15 at 21.30.06.pngScreenshot 2020-09-15 at 21.29.54.png

Views

191

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

If using a jQuery plugin, did you include a link to the jQuery Core JS Library as well as all other required scripts?  Can you upload your work to your remote server and post the URL?  Without seeing your page in context, it's impossible to troubleshoot.

 

That said, you don't need JS/jQuery to build responsive navigation.  This example is pure CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Flexbox Navigation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body {
font-family: 'Fira Sans', sans-serif;
margin: 0;
}
/**Global link styles**/
a {
color: white;
font-weight: 300;
letter-spacing: 2px;
text-decoration: none;
background:rgba(6,133,100,1.00);
padding: 20px 5px;
display: inline-block;
width: 100%;
text-align: center;
}
a:hover {background:rgba(6,133,100,0.60)}

/**Desktop, laptop devices**/
.main {
max-width: 1200px;
margin: 0 auto;
padding: 0 3em 1.5em;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navigation li { flex: 3; }
.navigation .user { flex: 1; }

/**Tablet devices**/
@media all and (max-width: 1000px) {
.navigation ul { flex-wrap: wrap; }
.navigation li { flex: 1 1 50%; }
.navigation .user { flex: 1 1 33.33%; }
}

/**Mobile devices**/
@media all and (max-width: 480px) {
.navigation li { flex-basis: 100%; }
.navigation .user { flex-basis: 50%; }
}
</style>
</head>
<body>
<div class="main">
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<!--Font Awesome Icons-->
<li class="user"><a href="#"><i class="fas fa-user"></i></a></li>
<li class="user"><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
<li class="user"><a href="#"><i class="fas fa-sign-out-alt"></i></a></li>
</ul>
</nav>
</div>
</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

Hi Nancy, im using this link for jquery but it could be the wrong....<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

 

sadly I only recently bought the domain so it isn't active yet so I cant send you an URL :(. 

Thank you so much for being so helpful! I'll look into doing rather with CSS as I am rather new and JS/Jquery isn't something I'm used too. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

Technically it should work if as already has been stated by Nancy you have the jQuery library linked to the page BEFORE the block of jQuery code that toggles your mobile menu.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

Hi guys thanks for the help! 

good news i got it to work. 

I had put my js script before the reference cnd reference..when I was supposed to put it after. 

Thank you Nancy and osgood_

 

 

 

 

Screenshot 2020-09-15 at 23.04.44.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

I can't tell much from the screenshots so this is all guesswork.  But jQuery UI might be part of this too, I don't know.

Also, I try to use minified jQuery with integrity & crossorigin checks from the official jQuery CDN.

https://code.jquery.com/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 15, 2020 Sep 15, 2020

Copy link to clipboard

Copied

LATEST

Thank you Nancy. 

the screenshot above is the result after clicking the menu. i just need to style it so it sits right now. and I will go look into minified jQuery and  https://code.jquery.com/.  

thanks again!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines