Expand the width left and right of the center using css transition

Question

Expand the width left and right of the center using css transition

I want my navigator, which has a correction width and is centered, on a scroll page to expand left and right from its center. Currently, he is just jumping to a new width.

I installed a demo in which you can see what I'm trying to do: http://codepen.io/anon/pen/Qyozvd

(Better watch the demo on codephene.)

$(document).ready(function() {

    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);

 	$(".navbar-toggle").on("click", function () {
		$(this).toggleClass("navbar-toggle-fix");
	});

});

var header, logo, yPos, windowWidth, headerCollapse, mbsp;
function yScroll() {
    header = document.getElementById('header');
    logo = document.getElementById('logo');
    headerCollapse = document.getElementById('headerCollapse');
    mbsp = document.getElementById('mbsp');
    yPos = window.pageYOffset;
    windowWidth = $(document).width();

    if (yPos > 10) {

        header.style.height = "69px";
        $(headerCollapse).removeClass('container');
        $('#logo').addClass('LogoCollapse');
        $('.navbar').addClass('mb-navbarCollapse');

        if (windowWidth > 768) {

        	//mbsp.style.height = "0px";

        }

        if (windowWidth < 768) {
        }

    } else {

        header.style.height = "186px";
        $(headerCollapse).addClass('container');
        $('#logo').removeClass('LogoCollapse');
		$('.navbar').removeClass('mb-navbarCollapse');

		

        if (windowWidth > 768) {

        	//mbsp.style.height = "186px";
            logo.style.width = "137px"
            logo.style.height = "69px"
            logo.style.backgroundSize = "137px auto"

        }

        if (windowWidth > 1024) {

            logo.style.width = "160px"
            logo.style.height = "119px"
            logo.style.backgroundSize = "160px auto"

        }

        if (windowWidth < 768) {
        }
        
    }

}
window.addEventListener("scroll", yScroll);

//Function to the css rule
function checkSize(){
    if ($(".mqJquery").css("float") == "none" ){
        
		$(function() {
		  var $el, leftPos, newWidth;
		  var $mainNav = $(".nav-tabs");
		  var activeItem = $(".nav-tabs .active")[0] ? $($(".nav-tabs .active")[0]) : null;
		  var itemLinks = $(".nav-tabs li a");

		  $mainNav.append("<li id='magic-line'></li>");
		  var $magicLine = $("#magic-line");

		  if (activeItem) {
		    $magicLine
		      .width(activeItem.width())
		      .css("left", activeItem.position().left)
		      .data("orig-left", activeItem.position().left)
		      .data("orig-width", $magicLine.width());
		  } else {
		    $magicLine.width(0);
		  }

		  itemLinks.hover(function() {
		    $el = $(this);
		    leftPos = $el.parent().position().left;
		    newWidth = $el.parent().width();

		    if (activeItem == null && $magicLine.position().left === 0) {
		      $magicLine.css("left", leftPos + newWidth / 2);
		    }

		    $magicLine.stop().animate({
		      left: leftPos,
		      width: newWidth
		    });
		  }, function() {
		    $magicLine.stop().animate({
		      left: $magicLine.data("orig-left"),
		      width: $magicLine.data("orig-width")
		    });
		  });
		});
        
    }
}

// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, "easeOutBounce");
});

// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(500, "easeOutBounce");
});

/* Basic styles */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic);

html {
  position: relative;
  min-height: 100%;
}

body {
	background-color:#cfcfcf;
	font-family: 'Roboto',Arial,Helvetica,sans-serif;
}

.mqJquery {
	float:left;
}

.clearfix {
	clear: both;
}

/* Headings */

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* Color Theme */

.mb-bg-red {
	background-color:#fd100a;
}

.mb-font-red {
	color:#fd100a;
}

.mb-bg-darkgrey {
	background-color: #3e3e3e;
}

.mb-red-grid-pattern {
	background-image: url('img/red-grid-pattern.png');
	background-repeat:repeat;
}

.mb-darkgrey-grid-pattern {
	background-image: url('img/darkgrey-grid-pattern.png');
	background-repeat:repeat;
}

/* Header styles */

header {
	background-image: url('img/header-pattern.png');
	border-top:4px solid #fd100a;
	width:100%;
	height:100px;
	transition: height 0.2s linear 0s, top 0.2s linear 0s;
    -webkit-transition: height 0.2s linear 0s, top 0.2s linear 0s;
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

/* Navbar responsive styles */

.navbar {
  margin-bottom: 20px;
}

.nav {
	margin-bottom: 15px;
}

.nav-tabs > li > a {
    border-radius: 0;
    color: #fff;
    font-size: 9pt;
    font-weight:500;
    -webkit-transition: background-color 150ms linear;
	-moz-transition: background-color 150ms linear;
	-o-transition: background-color 150ms linear;
	-ms-transition: background-color 150ms linear;
	transition: background-color 150ms linear;
}

.navbar .open .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover,
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.nav > li > a:focus, .nav > li > a:hover {
    background-color: #a41d1d;
    text-decoration: none;
}

.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
}

.nav-tabs > li {
    float:none;
}

.navbar-default,
.navbar-default .navbar-collapse, .navbar-default .navbar-form,
.nav-tabs {
    border-color: transparent;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
.navbar-default .navbar-toggle {
    border-color: #a41d1d;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #a41d1d;
}

.navbar .open .dropdown-menu {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    float: none;
    margin-top: 0;
    position: static;
    width: auto;
}

.navbar .open  .dropdown-menu > li > a {
	color:#fff;
}

.navbar .open .dropdown-menu .dropdown-header {
	color:#a41d1d;
}

.navbar .open .dropdown-menu .divider {
	background-color:#a41d1d;
}

.nav > li {
    display: block;
    position: relative;
}

.nav > li > a {
    display: block;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

	/* Animated navbar collapse icon */

	.navbar-toggle-fix {
		padding-left: 12px;
    	padding-right: 8px;
	}

	.navbar-toggle .icon-bar {
	    width: 22px;
	    transition: all 0.2s;
	    -webkit-transition: all 0.2s;
	}
	.navbar-default .navbar-toggle {
	    position:relative;
	    padding-top:10px;
	    z-index:100
	}
	.navbar-toggle .top-bar {
	    transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    transform-origin: 10% 10%;
	    -webkit-transform-origin: 10% 10%;
	}
	.navbar-toggle .middle-bar {
	    opacity: 0;
	}
	.navbar-toggle .bottom-bar {
	    transform: rotate(-45deg);
	    transform-origin: 10% 90%;
	    -webkit-transform: rotate(-45deg);
	    -webkit-transform-origin: 10% 90%;
	}
	.navbar-toggle.collapsed .top-bar {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}
	.navbar-toggle.collapsed .middle-bar {
	    opacity: 1;
	}
	.navbar-toggle.collapsed .bottom-bar {
	    transform: rotate(0);
	    -webkit-transform: rotate(0);
	}

/* Content styles */

#content {
	margin-top: 50px;
}

/* Footer styles */

footer {
  	position: relative;
  	bottom: 0;
  	width: 100%;
  	height: 448px;
  	background-color: #515151;
}

/* Layout styles */

#logo {
    background-image:url('img/logo.png');
	height: 67px;
	width: 90px;
    background-size: 67px auto;
    transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    -moz-transition:all 0.4s;
    margin-top:7px;
	margin-bottom: 11px;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.mqJquery {
		float:none;
	}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {



}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	/* Navbar styles */

	.navbar {
		height:64px;
		padding-left: 30px;
		padding-right:-30px;
    	position: absolute;
    	top: 150px;
    	-webkit-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
	    -moz-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
	    -o-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
	    -ms-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
	    transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
	}

	.container {
		-webkit-transition: width 0.5s ease-in-out;
	    -moz-transition: width 0.5s ease-in-out;
	    -o-transition: width 0.5s ease-in-out;
	    -ms-transition: width 0.5s ease-in-out;
	    transition: width 0.5s ease-in-out;
	}

	.mb-navbarCollapse {
		width: 100%;
		top:0px;
		background-color: #515151;
		background-image: url('img/darkgrey-grid-pattern.png');
		-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
	    -moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
	    -o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
	    -ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
	    transition: width 0.5s ease-in-out, top 0.5s ease-in-out, background-color 0.5s ease-in-out, background-image 1s ease-in-out;
	}

	.mb-navbarCollapse .nav .open > a, 
	.mb-navbarCollapse .nav .open > a:focus, 
	.mb-navbarCollapse .nav .open > a:hover, 
	.mb-navbarCollapse .nav-tabs > li > a:hover, 
	.mb-navbarCollapse .nav > li > a:focus, 
	.mb-navbarCollapse .nav > li > a:hover, 
	.mb-navbarCollapse .nav-tabs > li.active > a, 
	.mb-navbarCollapse .nav-tabs > li.active > a:focus, 
	.mb-navbarCollapse .nav-tabs > li.active > a:hover {
	    color: #f9131b !important;
	}

	.nav {
		margin-bottom: 0;
	}

	#magic-line {
	    background: #3e3e3e none repeat scroll 0 0;
	    top: 0px;
	    height: 0.2em;
	    left: 0;
	    position: absolute;
	    width: 100px;
	}

	.nav-tabs {
	    border-bottom: 0 none;
	}

	.nav-tabs:hover {
	    border-bottom: 1 none;
	}
	.nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
	.nav-tabs > li > a:hover,
	.nav > li > a:focus, .nav > li > a:hover,
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
		border: 0;
		border-color: transparent;
	    background-color: transparent;
	    color: #3e3e3e;
	    cursor:pointer;
	    padding: 23px 16px;
	    -webkit-transition: color 150ms linear;
	    -moz-transition: color 150ms linear;
	    -o-transition: color 150ms linear;
	    -ms-transition: color 150ms linear;
	    transition: color 150ms linear;
	}

	.nav > li > a {
	    padding: 22px 15px;
	}

	.nav-tabs > li {
	    float:left;
	}

	.navbar .open .dropdown-menu {
	    background-clip: padding-box;
	    background-color: #fff;
	    border: 1px solid rgba(0, 0, 0, 0.15);
	    border-radius: 4px;
	    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
	    display: none;
	    float: left;
	    font-size: 14px;
	    left: 0;
	    list-style: outside none none;
	    margin: 0;
	    min-width: 160px;
	    padding: 5px 0;
	    position: absolute;
	    text-align: left;
	    top: 100%;
	    z-index: 1000;
	}

	.navbar .open .dropdown-menu > li > a {
	    color: #3E3E3E;
	}

	.navbar .open .dropdown-menu > li > a:hover {
    	color: #fff;
	}
	
	/* Header style*/

	header {
		position: fixed;
		z-index: 1;
	    height: 186px;
	    
	}

	#headerCollapse {
		position: relative;
		-webkit-transition: all 0.5s ease-in-out;
	  	-moz-transition: all 0.5s ease-in-out;
	  	-o-transition: all 0.5s ease-in-out;
	  	transition: all 0.5s ease-in-out;
	}

	/* Content styles */

	#content {
		margin-top:20px;
	}

	/* Layout styles */

	#logo {
		height: 119px;
		width: 160px;
	    background-size: 160px auto;
		margin-top:17px;
		margin-bottom: 21px;
	}

	.LogoCollapse {
		background-size: 64px auto !important;
	    height: 48px !important;
	    left: 25% !important;
	    margin-top: 7px !important;
	    position: absolute !important;
	    width: 64px !important;
	    z-index: 9999 !important;
	}

}

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://getbootstrap.com/favicon.ico">

    <title>Muth Bau</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://mirsoftware.de/muthbau/css/jquery-ui.min.css" rel="stylesheet"/>

  </head>
<body>
    <div class="mqJquery"></div>
    <div class="clearfix"></div>

    <header id="header">
      <div id="headerCollapse" class="container">
        <a href="#"><div id="logo"></div></a>
        <!-- Static navbar -->
        <nav class="navbar navbar-default navbar-static-top mb-bg-red mb-red-grid-pattern">
          <div class="container">
            <div class="navbar-header">
              <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
              </button>
            </div>
            <div aria-expanded="false" id="navbar" class="navbar-collapse collapse">
              <ul class="nav nav-tabs">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">ÜBER UNS</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SERVICE <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
                <li><a href="#">KONTAKT</a></li>
                <li><a href="#">IMPRESSUM</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>
      </div>
    </header>
    <div id="mbsp" style="height:186px;"></div>
    <section id="content" class="container-fluid">
      <div class="jumbotron">
        <h1>blabla beispiel text</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
      </div>
            <div class="jumbotron">
        <h1>blabla beispiel text</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
      </div>
            <div class="jumbotron">
        <h1>blabla beispiel text</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
      </div>
            <div class="jumbotron">
        <h1>blabla beispiel text</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
      </div>
    </section> <!-- /content -->

    <footer class="mb-darkgrey-grid-pattern">
      <div class="container">
        <p>Place sticky footer content here.</p>
      </div>
    </footer>
<script src="http://mirsoftware.de/muthbau/js/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

Run code

+4

jquery html css css3 transition

egolive Feb 16 '16 at 11:31

source share

1 answer

xpy · Answer 1 · 2016-02-19T09:18:20+0000

- . , #headerCollapse, , .container.

#headerCollapse {
  transition: width 0.5s ease-in-out;
  position:relative;
}
#headerCollapse:not(.container){
  width:100%;
  height: 69px;
}
#headerCollapse.container{
  height: 186px;
}

, #headerCollapse 69 .container 186 , .container.

, , - .navbar , #headerCollapse .

.navbar {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}

Expand the width left and right of the center using css transition

More articles: