6
\$\begingroup\$

I created this responsive jQuery navigation which will re-size when the pixels get < 500 px and display the mobile navigation, although when the browser resizes > 500px it runs the widthCheck() function which is supposed to run the jQuery code that returns it to tablet/desktop size, although it doesn't do this transition smoothly.

Could someone help me? Maybe this is something in my code that isn't proper. It works but it isn't doing it smoothly.

$(document).ready(function() { //on ready function
    widthCheck ();

$(window)
 .resize(function(){ //Resize widthCheck
    widthCheck ();
});

$('.nav a')
 .click(function(){ //NavLinkClick Function Event Handler
    navLinkClick();
});


/*============= Mobile Navigation Click Function ================*/

$('#menu').click(function(){ 

     $(this).toggleClass('open');

      if ($(this)
        .hasClass('open')) {
        $('.nav')
          .slideDown('fast', function() {
          $('.nav a')
            .fadeIn('fast');  
        });
       } 

      else {
        $('.nav a')
         .fadeOut('fast', function() {
         $('.nav')
          .slideUp('fast');
        });
       }
     });


}); //Document.Ready Close

/*============= Nav Links Click Function ================*/

    function navLinkClick () { //Nav Link Function

        var width = $(window).width();

        if (width <= 500) {
           $('.nav a')
            .fadeOut('fast', function() {
               $('.nav')
                .slideUp('fast');
           });
        }
    }

 /*============= Device Width Check Function ================*/

    function widthCheck () { // Device Width Check

        var width = $(window).width(),
            $menu = $('#menu'),
                $nav = $('.nav'),
                    $navA = $('.nav a');


        if (width <= 500) {
            $navA
             .fadeOut(400, function() {
                $nav
                 .slideUp(400,function(){
                    $menu
                     .fadeIn(400);
                });
            });
        } // Close If 

        else {
            $menu
             .fadeOut('fast', function() {
                $nav
                 .slideDown(400, function() {
                    $navA
                     .fadeIn(400);

                });
            });
        } // Close Else
    } //Close Function
/******************************************************************
Website Name: 
Website URL:
Website Description: 
Author:Sean Parsons
Author Portfolio: http://seanpar203.github.io/portfolio/
Author Linkedln: https://www.linkedin.com/in/seanparsons203
******************************************************************/
/* Table of Content
==================================================
#Fonts
#Reset & Basics
#Header & Navigation  


*/

/*#Fonts
=================================================================== */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Pacifico);

/*#Reset & Basics
=================================================================== */
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    font-family: 'Source Sans Pro', sans-serif;

     }
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; }

table {
    border-collapse: collapse;
    border-spacing: 0; }

   .active{
   	color: rgb(255,255,255);
   }

/* #Header
=================================================================== */

/*Header Color*/
.header {
	position: fixed;
	width: 100%;
	background-color: #cc4646;
	padding-bottom: 20px;
	border-bottom: 4px solid black;
}

/* Logo Attributes */
.logo {
	font-family: 'Pacifico', cursive;
	font-size: 2.2em;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	height: 70px;
	margin-top: 20px;
	padding-bottom: 15px;
}

/*Navigation Attributes*/
nav ul li {
	margin-top: 15px;
	padding-bottom: 15px;
	font-size: 1.2em;
	font-variant: small-caps;
	text-align: center;
}
nav a {
	text-decoration: none;
	color:rgba(255,255,255, 0.65); 
}
nav a:hover {
	text-decoration: none;
	color: rgb(255,255,255);
}
/* Mobile Navigation Button*/
#menu {
	position: fixed;
	top: 2em;
	right: 1.5em;
	cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content=" Website Description ">
		<meta name="keywords" content=" Website Keywords ">
		<meta name="author" content=" Website Author ">	
		<title>Test Website</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

		<!-- Main Style Sheet -->
		<link rel="stylesheet" type="text/css" href="main.css">
		
		<!-- jQuery -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</script>
</head>
<body>

  <header class="header">
    <nav>
    	<div class="rows container-fluid">
    		<h1 class="logo col-md-10 col-xs-10">Sean Parsons Portfolio</h1>

<!--/====/===/===/===/ Button For Mobile Navigation ===/===/===/===/===/== -->
    		<div id="menu" class="col-md-2 col-xs-2">
			<img  src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-128.png" height="40px" width="40px" alt="Mobile Menu">
			</div>

    		 <div class="container">

				<!-- Navigation Links -->
    			<ul class="nav">
    				<div class="col-xs-6 col-sm-4 col-md-2">
    			    	<li><a href="#" title="Home">Home</a></li>
    			    </div>
    			    <div class="col-xs-6 col-sm-4 col-md-2">
    			     	<li><a href="#" title="About Me" rel="author">About Me</a></li>
    			    </div>
    			    <div class="col-xs-6 col-sm-4 col-md-2">
    			    	  <li><a href="#" title="Skills">Skills</a></li>
    			    </div>
    			    <div class="col-xs-6 col-sm-4 col-md-2">
    			    	<li><a href="#" title="Experience">Experience</a></li>
    			    </div>

    			    <div class="col-xs-6 col-sm-4 col-md-2">
    			    	<li><a href="#" title="Portfolio">Portfolio</a></li>
    			    </div>

    			    <div class="col-xs-6 col-sm-4 col-md-2">
    			    	<li><a href="#" title="Contact Us">Contact Us</a></li>
    			    </div>
    			</ul>
   </div> <!-- Navigation Container Collapse -->	
 </div> <!-- Row/Container-Fluid Collapse -->	
</nav>      
</header><!--/.header-->  
   


  
  	</body>
</html>

\$\endgroup\$
2
\$\begingroup\$

I think the transition is smooth enough.

Where I have a problem with this design is when the window width is 501-767px. This covers the common qHD, WVGA, FWVGA resolutions.

The problem being when the column width .col-xs-6 changes from 50% to 33.33%at 768px width.

At this point the red page header is taking up a large percentage of the vertical window real estate.

I do not have a way to test this on a mobile device that is in this width range in landscape. 640px is a very common landscape width. If this 33.33% width holds in landscape, the the whole window may be red.

500px seems to be an arbitrary width to do the switch. I would think a common screen width like 480px would make more sense.

\$\endgroup\$
2
\$\begingroup\$

One thing that I noticed in your HTML is that you have divs inside your unordered list and they all have the same 3 classes.

<ul class="nav">
    <div class="col-xs-6 col-sm-4 col-md-2">
        <li><a href="#" title="Home">Home</a></li>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-2">
        <li><a href="#" title="About Me" rel="author">About Me</a></li>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-2">
          <li><a href="#" title="Skills">Skills</a></li>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-2">
        <li><a href="#" title="Experience">Experience</a></li>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-2">
        <li><a href="#" title="Portfolio">Portfolio</a></li>
    </div>

    <div class="col-xs-6 col-sm-4 col-md-2">
        <li><a href="#" title="Contact Us">Contact Us</a></li>
    </div>
</ul>

You should create either a single class that holds all the styling for these list items, or create an ID just for you ul tag and let all the li tags inherit their styling from that ID's style.

Either way, you don't need these div tags, they are clutter to your beautiful HTML.

Do not be afraid to add classes to regular HTML tags.

Also, nested tags are supposed to be nested, so let them be nested/indented on their own line. White Space is no longer expensive.

<ul class="nav">
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="Home">Home</a>
    </li>
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="About Me" rel="author">About Me</a>
    </li>
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="Skills">Skills</a>
    </li>
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="Experience">Experience</a>
    </li>
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="Portfolio">Portfolio</a>
    </li>
    <li class="col-xs-6 col-sm-4 col-md-2">
        <a href="#" title="Contact Us">Contact Us</a>
    </li>
</ul>

The anchor tags here are actually your textual content inside the list items, they are just marked up as hyperlinks, let them have their own line.


Take a look at this for a second.

<!--/====/===/===/===/ Button For Mobile Navigation ===/===/===/===/===/== -->
<div id="menu" class="col-md-2 col-xs-2">
    <img  src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-128.png" height="40px" width="40px" alt="Mobile Menu">
</div>

This is a button, but you give it an ID of "menu" and then add 2 classes to it. This is a special item, give it the name it deserves something like menuIcon, then when you style it, throw all the styling into the same block of CSS. you can still use an ID on this because it will be the only one on the page.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.