Transitions or other

Question

Im a bit stuck on the best practice to do this. I have a picture of a ruler in my header which sits over the nav bar. I use "mouseenter" and the ruler moves to the right, over the button you are hovering over. I use JQuery with mouse enter/leave which takes a data-ruler-move value and adds a class with a transform/translate rule. It works OK but... Looking at the css, I write a new rule for every position. Which is five buttons. Which is quite a bit of css. PLUS I am going to have to change those transform values when the window gets smaller and the ruler gets smaller (Bootstrap css responsive). Im looking for a better or shorter amount of code if there is. I have looked to see if sass might help but have not found anything. I would like to just use css/html/JS for now if possible. Thanks before hand for any help. Jason Css and js to follow.

$(".navbar-inverse .navbar-nav>li>a").mouseenter(function() {
  var moveTo = $(this).data("ruler-moves");
  console.log(moveTo);
  $(".ruler").addClass(moveTo);

  $(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {
    $(".ruler").removeClass(moveTo);
  });
});

.ruler {
    margin-top: 55px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
}

.home {
    -webkit-transform: translate(4em, 0);
    -moz-transform: translate(4em, 0);
    -o-transform: translate(4em, 0);
    -ms-transform: translate(4em, 0);
}

.contact {
   -webkit-transform: translate(8em, 0);
   -moz-transform: translate(8em, 0);
   -o-transform: translate(8em, 0);
   -ms-transform: translate(8em, 0);
}

.estimate {
   -webkit-transform: translate(12em, 0);
   -moz-transform: translate(12em, 0);
   -o-transform: translate(12em, 0);
   -ms-transform: translate(12em, 0);
}

.gallery {
   -webkit-transform: translate(16em, 0);
   -moz-transform: translate(16em, 0);
   -o-transform: translate(16em, 0);
   -ms-transform: translate(16em, 0);
}

.references {
   -webkit-transform: translate(20em, 0);
   -moz-transform: translate(20em, 0);
   -o-transform: translate(20em, 0);
   -ms-transform: translate(20em, 0);
}

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS (Bootstrap)-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme (Bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript (Bootstrap)-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="row header">
  <div class="col-md-6">
    <a href="index.php">
      <img class="img-responsive logo" src="images/logo.jpg">
    </a>
  </div>

  <div class="col-md-6">
    <img src="images/ruler.jpg" class="img-responsive ruler">
  </div>
</div>
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav pull-right my-nav">
    <li><a href="index.php" data-ruler-moves="home">Home</a></li>
    <li><a href="contact.php" data-ruler-moves="contact">Contact</a></li>
    <li><a href="estimate.php" data-ruler-moves="estimate">Estimate</a></li>
    <li><a href="gallery.php" data-ruler-moves="gallery">Gallery</a></li>
    <li><a href="references.php" data-ruler-moves="references">References</a></li>
  </ul>
</div>

Answer 1

You can easily create a mixin for this, passing the values that you want as a parameter:

@mixin posXY($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}

Then use it like so:

.gallery {
  @include posXY(4em, 0);
}

This will give you a shorter SASS file and make it faster and more efficient to position elements. What I usually do is also to apply a position: absolute; in this mixin as well as a top, right, left and a bottom rule for convience.

I would even take it a step longer and create a transitions mixin:

@mixin transitions($property, $duration, $effect) {
  -webkit-transition: -webkit-$property $duration $effect;
  transition: $property $duration $effect;
}

Then use it like so:

.ruler {
  @include transitions(all, 400ms, ease-in-out);
}

Another step you can take to improve your code is make it faster to write, so this:

$(".navbar-inverse .navbar-nav>li>a")

Should be saved in a variable, so should it ever change, you don't have to rewrite it in 10 different places for the code to work again. So do this:

var anchor = $(".navbar-inverse .navbar-nav>li>a");

anchor.mouseenter(function() {

  // Your code here
});

anchor.mouseleave(function() {

  // Your code here
});