4
我想要我的導航欄，其中的固定寬度爲且居中，頁面滾動時從中心向左和向右擴展。目前它只是跳到它的新寬度。從css轉換中心向左和向右擴展寬度
我成立了一個演示，你可以看到我想要做的事：（在上codepen演示更好看） http://codepen.io/anon/pen/Qyozvd
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
\t $(".navbar-toggle").on("click", function() {
\t \t $(this).toggleClass("navbar-toggle-fix");
\t });
});
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) {
\t //mbsp.style.height = "0px";
}
if (windowWidth < 768) {
}
} else {
header.style.height = "186px";
$(headerCollapse).addClass('container');
$('#logo').removeClass('LogoCollapse');
\t \t $('.navbar').removeClass('mb-navbarCollapse');
\t \t
if (windowWidth > 768) {
\t //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"){
\t \t $(function() {
\t \t var $el, leftPos, newWidth;
\t \t var $mainNav = $(".nav-tabs");
\t \t var activeItem = $(".nav-tabs .active")[0] ? $($(".nav-tabs .active")[0]) : null;
\t \t var itemLinks = $(".nav-tabs li a");
\t \t $mainNav.append("<li id='magic-line'></li>");
\t \t var $magicLine = $("#magic-line");
\t \t if (activeItem) {
\t \t $magicLine
\t \t .width(activeItem.width())
\t \t .css("left", activeItem.position().left)
\t \t .data("orig-left", activeItem.position().left)
\t \t .data("orig-width", $magicLine.width());
\t \t } else {
\t \t $magicLine.width(0);
\t \t }
\t \t itemLinks.hover(function() {
\t \t $el = $(this);
\t \t leftPos = $el.parent().position().left;
\t \t newWidth = $el.parent().width();
\t \t if (activeItem == null && $magicLine.position().left === 0) {
\t \t $magicLine.css("left", leftPos + newWidth/2);
\t \t }
\t \t $magicLine.stop().animate({
\t \t left: leftPos,
\t \t width: newWidth
\t \t });
\t \t }, function() {
\t \t $magicLine.stop().animate({
\t \t left: $magicLine.data("orig-left"),
\t \t width: $magicLine.data("orig-width")
\t \t });
\t \t });
\t \t });
}
}
// 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 {
\t background-color:#cfcfcf;
\t font-family: 'Roboto',Arial,Helvetica,sans-serif;
}
.mqJquery {
\t float:left;
}
.clearfix {
\t clear: both;
}
/* Headings */
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
/* Color Theme */
.mb-bg-red {
\t background-color:#fd100a;
}
.mb-font-red {
\t color:#fd100a;
}
.mb-bg-darkgrey {
\t background-color: #3e3e3e;
}
.mb-red-grid-pattern {
\t background-image: url('img/red-grid-pattern.png');
\t background-repeat:repeat;
}
.mb-darkgrey-grid-pattern {
\t background-image: url('img/darkgrey-grid-pattern.png');
\t background-repeat:repeat;
}
/* Header styles */
header {
\t background-image: url('img/header-pattern.png');
\t border-top:4px solid #fd100a;
\t width:100%;
\t height:100px;
\t transition: height 0.2s linear 0s, top 0.2s linear 0s;
-webkit-transition: height 0.2s linear 0s, top 0.2s linear 0s;
\t -webkit-background-clip: padding-box; /* for Safari */
\t background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
/* Navbar responsive styles */
.navbar {
margin-bottom: 20px;
}
.nav {
\t margin-bottom: 15px;
}
.nav-tabs > li > a {
border-radius: 0;
color: #fff;
font-size: 9pt;
font-weight:500;
-webkit-transition: background-color 150ms linear;
\t -moz-transition: background-color 150ms linear;
\t -o-transition: background-color 150ms linear;
\t -ms-transition: background-color 150ms linear;
\t 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 {
\t color:#fff;
}
.navbar .open .dropdown-menu .dropdown-header {
\t color:#a41d1d;
}
.navbar .open .dropdown-menu .divider {
\t 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;
}
\t /* Animated navbar collapse icon */
\t .navbar-toggle-fix {
\t \t padding-left: 12px;
\t padding-right: 8px;
\t }
\t .navbar-toggle .icon-bar {
\t width: 22px;
\t transition: all 0.2s;
\t -webkit-transition: all 0.2s;
\t }
\t .navbar-default .navbar-toggle {
\t position:relative;
\t padding-top:10px;
\t z-index:100
\t }
\t .navbar-toggle .top-bar {
\t transform: rotate(45deg);
\t -webkit-transform: rotate(45deg);
\t transform-origin: 10% 10%;
\t -webkit-transform-origin: 10% 10%;
\t }
\t .navbar-toggle .middle-bar {
\t opacity: 0;
\t }
\t .navbar-toggle .bottom-bar {
\t transform: rotate(-45deg);
\t transform-origin: 10% 90%;
\t -webkit-transform: rotate(-45deg);
\t -webkit-transform-origin: 10% 90%;
\t }
\t .navbar-toggle.collapsed .top-bar {
\t transform: rotate(0);
\t -webkit-transform: rotate(0);
\t }
\t .navbar-toggle.collapsed .middle-bar {
\t opacity: 1;
\t }
\t .navbar-toggle.collapsed .bottom-bar {
\t transform: rotate(0);
\t -webkit-transform: rotate(0);
\t }
/* Content styles */
#content {
\t margin-top: 50px;
}
/* Footer styles */
footer {
\t position: relative;
\t bottom: 0;
\t width: 100%;
\t height: 448px;
\t background-color: #515151;
}
/* Layout styles */
#logo {
background-image:url('img/logo.png');
\t height: 67px;
\t 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;
\t margin-bottom: 11px;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
\t .mqJquery {
\t \t float:none;
\t }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
\t /* Navbar styles */
\t .navbar {
\t \t height:64px;
\t \t padding-left: 30px;
\t \t padding-right:-30px;
\t position: absolute;
\t top: 150px;
\t -webkit-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
\t -moz-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
\t -o-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
\t -ms-transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
\t transition: top 0.3s ease-in-out, width 0.3s ease-in-out;
\t }
\t .container {
\t \t -webkit-transition: width 0.5s ease-in-out;
\t -moz-transition: width 0.5s ease-in-out;
\t -o-transition: width 0.5s ease-in-out;
\t -ms-transition: width 0.5s ease-in-out;
\t transition: width 0.5s ease-in-out;
\t }
\t .mb-navbarCollapse {
\t \t width: 100%;
\t \t top:0px;
\t \t background-color: #515151;
\t \t background-image: url('img/darkgrey-grid-pattern.png');
\t \t -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;
\t -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;
\t -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;
\t -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;
\t 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;
\t }
\t .mb-navbarCollapse .nav .open > a,
\t .mb-navbarCollapse .nav .open > a:focus,
\t .mb-navbarCollapse .nav .open > a:hover,
\t .mb-navbarCollapse .nav-tabs > li > a:hover,
\t .mb-navbarCollapse .nav > li > a:focus,
\t .mb-navbarCollapse .nav > li > a:hover,
\t .mb-navbarCollapse .nav-tabs > li.active > a,
\t .mb-navbarCollapse .nav-tabs > li.active > a:focus,
\t .mb-navbarCollapse .nav-tabs > li.active > a:hover {
\t color: #f9131b !important;
\t }
\t .nav {
\t \t margin-bottom: 0;
\t }
\t #magic-line {
\t background: #3e3e3e none repeat scroll 0 0;
\t top: 0px;
\t height: 0.2em;
\t left: 0;
\t position: absolute;
\t width: 100px;
\t }
\t .nav-tabs {
\t border-bottom: 0 none;
\t }
\t .nav-tabs:hover {
\t border-bottom: 1 none;
\t }
\t .nav .open > a, .nav .open > a:focus, .nav .open > a:hover,
\t .nav-tabs > li > a:hover,
\t .nav > li > a:focus, .nav > li > a:hover,
\t .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
\t \t border: 0;
\t \t border-color: transparent;
\t background-color: transparent;
\t color: #3e3e3e;
\t cursor:pointer;
\t padding: 23px 16px;
\t -webkit-transition: color 150ms linear;
\t -moz-transition: color 150ms linear;
\t -o-transition: color 150ms linear;
\t -ms-transition: color 150ms linear;
\t transition: color 150ms linear;
\t }
\t .nav > li > a {
\t padding: 22px 15px;
\t }
\t .nav-tabs > li {
\t float:left;
\t }
\t .navbar .open .dropdown-menu {
\t background-clip: padding-box;
\t background-color: #fff;
\t border: 1px solid rgba(0, 0, 0, 0.15);
\t border-radius: 4px;
\t box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
\t display: none;
\t float: left;
\t font-size: 14px;
\t left: 0;
\t list-style: outside none none;
\t margin: 0;
\t min-width: 160px;
\t padding: 5px 0;
\t position: absolute;
\t text-align: left;
\t top: 100%;
\t z-index: 1000;
\t }
\t .navbar .open .dropdown-menu > li > a {
\t color: #3E3E3E;
\t }
\t .navbar .open .dropdown-menu > li > a:hover {
\t color: #fff;
\t }
\t
\t /* Header style*/
\t header {
\t \t position: fixed;
\t \t z-index: 1;
\t height: 186px;
\t
\t }
\t #headerCollapse {
\t \t position: relative;
\t \t -webkit-transition: all 0.5s ease-in-out;
\t \t -moz-transition: all 0.5s ease-in-out;
\t \t -o-transition: all 0.5s ease-in-out;
\t \t transition: all 0.5s ease-in-out;
\t }
\t /* Content styles */
\t #content {
\t \t margin-top:20px;
\t }
\t /* Layout styles */
\t #logo {
\t \t height: 119px;
\t \t width: 160px;
\t background-size: 160px auto;
\t \t margin-top:17px;
\t \t margin-bottom: 21px;
\t }
\t .LogoCollapse {
\t \t background-size: 64px auto !important;
\t height: 48px !important;
\t left: 25% !important;
\t margin-top: 7px !important;
\t position: absolute !important;
\t width: 64px !important;
\t z-index: 9999 !important;
\t }
}<!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>
警告：您的codepen有一點點錯字：html的