Highlighted

Responsive burger menu

Community Beginner ,
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

103

Likes

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

Responsive burger menu

Community Beginner ,
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

104

Likes

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
Sep 15, 2020 0
Adobe Community Professional ,
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, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Sep 15, 2020 1
Community Beginner ,
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. 

Likes

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
Reply
Loading...
Sep 15, 2020 0
LEGEND ,
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.

Likes

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
Reply
Loading...
Sep 15, 2020 2
Community Beginner ,
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

Likes

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
Reply
Loading...
Sep 15, 2020 0
Adobe Community Professional ,
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, ACP
Alt-Web.com

Likes

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
Reply
Loading...
Sep 15, 2020 1
Community Beginner ,
Sep 15, 2020

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...
Sep 15, 2020 0