Simple Responsive Css Menu

Responsive menu is the first requirment for responsive web designes. So this is the simplest tutorial of <strong>Simple Responsive Css Menu</strong>, just copy and paste this code in your website.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">

<header class='header text-center'>
    <h2>Rating Widget</h2>
  <p>A simple star rating widget with <b>jQuery</b> and <b>FontAwesome</b> icons.</p>
</header>

<section class='rating-widget'>
  
  <!-- Rating Stars Box -->
  <div class='rating-stars text-center'>
    <ul id='stars'>
      <li class='star' title='Poor' data-value='1'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Fair' data-value='2'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Good' data-value='3'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='Excellent' data-value='4'>
        <i class='fa fa-star fa-fw'></i>
      </li>
      <li class='star' title='WOW!!!' data-value='5'>
        <i class='fa fa-star fa-fw'></i>
      </li>
    </ul>
  </div>
  
  <div class='success-box'>
    <div class='clearfix'></div>
    <img alt='tick image' width='32' src='https://i.imgur.com/3C3apOp.png'/>
    <div class='text-message'></div>
    <div class='clearfix'></div>
  </div>
  
  
  
</section>



  
  <!-- Rating Stars Box -->
  <div class='rating-stars text-center'>
    <ul id='stars'>
      <li class='star' title='Poor' data-value='1'>
       <i class="icon ion-md-star"></i>
      </li>
      <li class='star' title='Fair' data-value='2'>
        <i class="icon ion-logo-facebook"></i>
      </li>
      <li class='star' title='Good' data-value='3'>
       <i class="icon ion-md-star"></i>
      </li>
      <li class='star' title='Excellent' data-value='4'>
        <i class="icon ion-md-star"></i>
      </li>
      <li class='star' title='WOW!!!' data-value='5'>
        <i class="icon ion-md-star"></i>
      </li>
    </ul>
  </div>
  
  <div class='success-box'>
    <div class='clearfix'></div>
    <img alt='tick image' width='32'...

SCSS

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #555;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &:before, &:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.clearfix {
  clear: both;
}

.text-center {
  text-align: center;
}

a {
  color: tomato;
  text-decoration: none;
  &:hover {
    color: #2196f3;
  }
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #F5F5F5;
  border: 1px solid #CCC;
  border-radius: 4px;
}

.header {
  padding: 20px 0;
  position: relative;
  margin-bottom: 10px;
  &:after {
    content: "";
    display: block;
    height: 1px;
    background: #eee;
    position: absolute;
    left: 30%;
    right: 30%;
  }
  h2 {
    font-size: 3em;
    font-weight: 300;
    margin-bottom: 0.2em;
  }
  p {
    font-size: 14px;
  }
}

#a-footer {
  margin: 20px 0;
}

.new-react-version {
  padding: 20px 20px;
  border: 1px solid #eee;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  .react-svg-logo {
    text-align: center;
    max-width: 60px;
    margin: 20px auto;
    margin-top: 0;
  }
}

.success-box {
  margin: 50px 0;
  padding: 10px 10px;
  border: 1px solid #eee;
  background: #f9f9f9;
  img {
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
  }
  > div {
    vertical-align: top;
    display: inline-block;
    color: #888;
  }
}

/* Rating Star Widgets Style */

.rating-stars ul {
  list-style-type: none;
  padding: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  > li.star {
    display: inline-block;
    > i {
      font-size: 2.5em;
      /* Change the size of the stars */
     ...

JavaScript

$(document).ready(function(){
  
  /* 1. Visualizing things on Hover - See next part for action on click */
  $('#stars li').on('mouseover', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on
   
    // Now highlight all the stars that's not after the current hovered star
    $(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        $(this).addClass('hover');
      }
      else {
        $(this).removeClass('hover');
      }
    });
    
  }).on('mouseout', function(){
    $(this).parent().children('li.star').each(function(e){
      $(this).removeClass('hover');
    });
  });
  
  
  /* 2. Action to perform on click */
  $('#stars li').on('click', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently selected
    var stars = $(this).parent().children('li.star');
    
    for (i = 0; i < stars.length; i++) {
      $(stars[i]).removeClass('selected');
    }
    
    for (i = 0; i < onStar; i++) {
      $(stars[i]).addClass('selected');
    }
    
    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
    var msg = "";
    if (ratingValue > 1) {
        msg = "Thanks! You rated this " + ratingValue + " stars.";
    }
    else {
        msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
    }
    responseMessage(msg);
    
  });
});


function responseMessage(msg) {
  $('.success-box').fadeIn(200);  
  $('.success-box div.text-message').html("<span>" + msg + "</span>");
}