patternjavascriptMinor

Nav slider needs to be smoothed out

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

navneedsslidersmoothedout

Problem

I created this responsive jQuery navigation which will re-size when the pixels get 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

/
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
====================

Solution

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.


    
        Home
    
    
        About Me
    
    
          Skills
    
    
        Experience
    

    
        Portfolio
    

    
        Contact Us

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.


    
        Home
    
    
        About Me
    
    
        Skills
    
    
        Experience
    
    
        Portfolio
    
    
        Contact Us

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.

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.

Code Snippets

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

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

<!--/====/===/===/===/ 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>

Context

StackExchange Code Review Q#86400, answer score: 2

Revisions (0)

No revisions yet.