My first mobile icon nav is not behaving
having no luck transferring different tutorials code own layout here. tried 1 lynda.com, 1 treehouse
trying hamburger nav icon swap in @ tablet , mobile size, , full nav dropdown un-hides when nav icon clicked.
looking simple basic html/css can understand & explain @ novice level.
thanks
for ref., 2 earlier threads helped w/ other aspects of site: aligning & behavior
see if can work page code below. i've changed css around bit way have set not easy work with. particularly @ code line below down until closing </head> tag, controls hamburger icon.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
page code starts here ---------------------------->
<!doctype html>
<html lang="en">
<head>
<title>molly's gourmet pralines</title>
<meta name="description" content="delicious, fresh, all-natural southern-style pecan praline candy">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" media="screen" href="mollyspralines.css"> -->
<!-- larry sullivan -->
<style>
/* html5 display-role reset older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------- global styles ----------------------- */
header, nav, section, article, main {
display: block;
}
* {
box-sizing: border-box;
}
.ir {
display: none;
}
body {
margin: 0;
padding: 0;
background-color: #a8e3ff;
color: #330000;
font-family: verdana, arial, sans-serif;
background-image: url(http://larrysullivanphotography.com/git414/v7/images/images/bg_lines_whi.png);
;){kind=link}
}
header {
margin: 0 0 15px 0;
padding: 20px 0 15px 0;
background-color: #3960a7;
color: #000;
border-bottom: 3px solid #139cff;
overflow: hidden;
}
.logo {
float: left;
width: 25%;
margin: 0 0 0 5%;
}
.logo img {
width: 150px;
}
.logo span {
display: none;
}
h1 {
margin: 0;
padding: 0;
}
h2 {
text-transform: uppercase;
color: #3960a7;
font-size: 1.2em;
padding: 5px 0 0 5px;
margin-right: 20px;
clear: left;
font-weight: bold;
font-family: verdana, arial, sans-serif;
}
.main-nav {
margin: 0;
padding: 35px 85px 0 0;
float: right;
text-align: right;
width: 70%;
font-weight: normal;
}
.main-nav {
text-decoration: none;
padding-bottom: 15px;
}
.main-nav a:link {
color: #feb509;
}
.main-nav a:visited {
color: #00aeff;
}
.main-nav a:hover {
color: #fff;
}
.main-nav a:active {
color: #fff;
}
.main-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.main-nav ul li {
margin: 0;
padding: 0;
display: inline;
padding-left: 15px;
text-transform: uppercase;
}
/* --------- hamburger nav begin ----- */
/* --------- hamburger nav end ----- */
#wrapper {
margin: auto;
padding: 0;
width: 100%;
background-color: #fcf7db;
min-width: 700px;
max-width: 1024px;
box-shadow:3px 3px 5px #666;
}
main {
margin: auto;
padding: 10px 0 30px;
width: 85%;
color: #000;
overflow: auto;
}
p.regular {
color: #3960a7;
font-family: verdana, arial, sans-serif;
font-size: 1em;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
#desktop {
display: inline;
}
#mobile {
display: none;
}
#welcome-message {
margin: 30px 0 20px 0;
padding: 0;
width: 100%;
border-bottom: 1px solid #3960a7;
text-align: center;
}
#welcome-message h2 {
border-top: 1px solid #3960a7;
padding: 0;
margin: 0;
text-align: center;
position: relative;
}
#welcome-message h2 span {
width: 11em;
margin: 0 auto;
margin-top: -12px;
display: block;
background-color:#fcf7db;
}
#welcome-message p {
margin: 0;
padding: 8px 0 20px 0;
color: #3960a7;
}
.product-image {
padding: 0;
border: 1px solid #3960a7;
float: left;
margin: 0 13px 10px 0px;
width: 204px;
height: 207px;
}
footer {
margin: auto;
padding: 15px 0;
background-color: #3960a7;
clear: both;
text-align: center;
font-size: 11px;
}
footer p {
margin: 0;
padding: 8px 0 0 0;
color: #feb509;
}
footer ul {
margin: 0;
padding: 0;
}
footer li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #feb509;
}
footer a:link {
margin: 0;
padding: 0 5px 0 5px;
display: inline-block;
text-decoration: none;
color: #feb509;
}
footer a:visited {
color: #f2eab7;
}
footer a:hover {
color: #330000;
}
.sub-nav-marker li:last-child {
border: none;
}
/* page marker */
footer .home {
color: #fff;
text-decoration: underline;
}
/* ..................... form controls ..................... */
form {
width: 70%;
margin: 0 20px 0 70px;
padding: 5px 0 20px 0;
color: #3960a7;
font-family: verdana, arial, sans-serif;
font-size: .8em;
overflow: hidden;
}
label {
float: left;
text-align: right;
width: 39%;
margin: 0 0 10px 0;
padding: 1% 3%;
}
input, select {
float:left;
width: 53%;
margin: 0 0 10px 0;
padding: 1% 0;
}
textarea {
float:left;
width: 53%;
}
select {
width: 25%;
}
#mysubmit {
margin-left: 39%;
font-size: .8em;
font-weight: bold;
text-transform: uppercase;
width: 18%;
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
}
form p {
clear: both;
font-size: .83em;
color: #000;
margin-left: 39%;
}
#mycomments {
padding: 25px 0;
margin: 1% 0 2% 0;
}
#comments {
clear: both;
}
/* -------------------- begin media query tablet ---------------*/
@media screen , (max-width: 1024px) {
#wrapper {
margin: 0;
box-shadow: none;
}
main {
padding: 2em;
margin: 0;
font-size: 90%;
}
}
/* -------------------- end media query tablet ---------------------*/
/* -------------------- begin media query mobile ---------------*/
@media screen , (max-width: 768px) {
main {
margin: auto;
padding: 0;
overflow: auto;
}
#wrapper {
margin: auto;
padding: 0;
width: 100%;
background-color: #fcf7db;
min-width: 320px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
#main_image {
margin: auto;
padding: 0;
}
/* .product-image {
margin: 0 0 10px 0;
padding: 0;
border: 1px solid #3960a7;
float: none;
} */
.product-image {
float: none;
/* width: 70%; */
margin: 0 auto 20px auto;
}
footer {
display: none;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
/* ----------------- form, mobile ------------- */
form {
width: 90%;
margin: auto;
padding: 5px 0 10px 0;
color: #3960a7;
font-family: verdana, arial, sans-serif;
font-size: .8em;
overflow: hidden;
}
label {
float: left;
text-align: left;
margin: 0 0 10px 0;
padding: 0;
}
input, select {
clear: both;
width: 100%;
margin: 0 0 10px 0;
padding: 1% 0;
}
textarea {
float:left;
width: 100%;
}
select {
width: 25%;
}
#mysubmit {
margin: 10px auto;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
width: 50%;
border: 1px solid #ccc;
padding: 8px;
border-radius: 5px;
}
form p {
padding: 0;
margin: 0;
clear: both;
text-align: left;
font-size: .83em;
color: #000;
}
#mycomments {
padding: 15px 0 0 0;
margin: auto;
}
#comments {
clear: both;
}
}
/* -------------------- end media query mobile ---------------*/
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#menu-icon').css('cursor','pointer').click(function() {
$('.main-nav').slidetoggle(400);
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() > 1100) {
$('.main-nav').show();
}
});
});
});
</script>
<style>
#menu-icon {
display: none;
width: 28px;
height: 20px;
background: url(http://larrysullivanphotography.com/git414/v7/images/icon_nav_hamburger_28x20.png) center;
float: right;
margin: 20px 55px 0 0;
color: #fff;
}
@media screen , (max-width: 1100px) {
.logo {
float: left;
width: 50%;
margin: 0 0 0 5%;
}
.logo img {
width: 120px;
}
#menu-icon {
display: block;
}
.main-nav {
display: none;
float: none;
width: 100%;
padding: 25px 0 0 0;
clear: both;
}
.main-nav {
text-decoration: none;
padding-bottom: 15px;
}
.main-nav ul li {
display: block;
padding: 0 0 15px 0;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1 class="ir">molly's pecan pralines</h1>
<a class="logo" title="molly's gourmet pralines" href="index.html"><span>molly's gourmet pralines</span><img src="http://larrysullivanphotography.com/git414/v7/images/logo_176x94.png"></a>
<a href="#" id="menu-icon"></a>
<nav class="main-nav" role="navigation">
<ul class="page-marker">
<li><a href="index.html" title="home">home</a></li>
<li><a href="#" title="pralines">pralines</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="events">events</a></li>
<li><a href="#" title="testimonials">testimonials</a></li>
<li><a href="_contact.html" title="contact">contact</a></li>
</ul>
</nav>
</header>
<section id="main_image">
<h2 class="ir">main image</h2>
<img src="http://larrysullivanphotography.com/git414/v7/images/main-image-pralines_1024x178.jpg" alt="delicious pecan pralines" title="pecan pralines">
</section>
<main>
<h2 class="ir">main content</h2>
<section id="welcome-message">
<h2><span>pecan pralines</span></h2>
<p> made daily fresh, natural, locally-sourced ingredients, confident molly's pralines in fact "the best pralines ever taste... " </p>
</section>
<section class="product-image">
<h3 class="ir">pecan pralines</h3>
<a href="#">
<img src="http://larrysullivanphotography.com/git414/v7/images/productty-pecan-pralines_202x205.jpg" alt="pecan pralines" title="pecan pralines">
</a>
</section>
<section class="product-image">
<h3 class="ir">sugar-free pralines</h3>
<a href="#">
<img src="http://larrysullivanphotography.com/git414/v7/images/productty-sugarfree-pralines_202x205. jpg" alt="sugar-free pralines" title="sugar-free pralines">
</a>
</section>
<section class="product-image">
<h3 class="ir">peanut pralines</h3>
<a href="#">
<img src="http://larrysullivanphotography.com/git414/v7/images/productty-peanut-pralines_202x205.jpg" alt="peanut pralines" title="peanut pralines">
</a>
</section>
<section class="product-image">
<h3 class="ir">chocolate pralines</h3>
<a href="#">
<img src="http://larrysullivanphotography.com/git414/v7/images/productty-choc-pralines_202x205.jpg" alt="chocolate pralines" title="chocolate pralines">
</a>
</section>
</main>
<footer role="contentinfo">
<h2 class="ir">footer section</h2>
<nav class="sub-nav">
<h2 class="ir">secondary navigation</h2>
<ul class="sub-nav-marker">
<li><a href="index.html" title="home">home</a></li>
<li><a href="#" title="pralines">pralines</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="events">events</a></li>
<li><a href="#" title="testimonials">testimonials</a></li>
<li><a href="_contact.html" title="contact">contact</a></li>
</ul>
</nav>
<p>copyright ©2016 mollysgourmetpralines.com<a href="mailto:lpsulliv@asu.edu">lpsulliv@asu.edu</a></p>
</footer>
</div>
</body>
</html>
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment