API tools faq
paste
Advertisement
Imperative-Ideas

Custom Header for MindShare HR

Imperative-Ideas
Jul 9th, 2014
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.90 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!-- Delete these lines if jQuery is already installed on the theme -->
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  4. <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  5. <!-- End Delete -->
  6.  
  7.  
  8. <header class="global">
  9.     <div class="date-search">
  10.     </div>
  11.     <div class="branding">
  12.         <h1><a href="#"><img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/wpmu001-logo.png" alt="Mindshare HR Logo" /></a></h1>
  13.     </div>
  14.     <nav>
  15.         <div id="hamburger"><i class="icon-menu"></i> Menu</div>
  16.         <ul class="sf-menu">
  17.         <li class="home">
  18.         <a href="#" title="Home"><i class="icon-home"></i><span> Home</span></a>
  19.         </li>
  20.             <li>
  21.             <a href="#">Knowledge Center</a>
  22.             <span class="sub-indicator"></span>
  23.                 <ul>
  24.                     <li><a href="#">HR Analytics</a>
  25.                     <li><a href="#">Strategic HRM</a>
  26.                     <li><a href="#">Talent Management</a>
  27.                     <li><a href="#">Learning &amp; Development</a>
  28.                     <li><a href="#">CSR</a>
  29.                     <li><a href="#">HR &amp; Social Media</a>
  30.                 </ul>
  31.             </li>
  32.             <li><a href="#">Blog</a></li>
  33.             <li><a href="#">About Us</a></li>
  34.         </ul>
  35.     </nav>
  36. </header>
  37.  
  38.  
  39. <style>
  40. /*** Get Google font for menu ***/
  41. @import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700");
  42.  
  43. /*** Initialize the icon font (home & menu button) ***/
  44. @font-face {
  45.  font-family: 'mindshare';
  46.   src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.eot?95499031");
  47.   src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.eot?95499031#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.woff?95499031") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.ttf?95499031") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/mindshare.svg?95499031#mindshare") format("svg");
  48.   font-weight: normal;
  49.   font-style: normal; }
  50.  
  51. [class^="icon-"]:before, [class*=" icon-"]:before {
  52.   font-family: "mindshare";
  53.   font-style: normal;
  54.   font-weight: normal;
  55.   speak: none;
  56.   display: inline-block;
  57.   text-decoration: inherit;
  58.   width: 1em;
  59.   margin-right: .2em;
  60.   text-align: center;
  61.   font-variant: normal;
  62.   text-transform: none;
  63.   line-height: 1em;
  64.   margin-left: .2em;
  65. }
  66. .icon-home:before {
  67.   content: '\e800'; }
  68. .icon-menu:before {
  69.   content: '\e801'; }
  70.  
  71. /*** Core Superfish Menu Styles ***/
  72. .sf-menu{margin:0;padding:0;list-style:none}.sf-menu *{margin:0;padding:0;list-style:none}.sf-menu ul{position:absolute;top:-999em;width:10em}.sf-menu ul li{width:100%}.sf-menu li{float:left;position:relative}.sf-menu li:hover{visibility:inherit}.sf-menu a{display:block;position:relative}.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:2.5em;z-index:99}ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:10em;top:0}ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em}ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:10em;top:0}
  73.  
  74.  
  75. /*** Header Styles **/
  76.  
  77. header.global {
  78.   /* Begin modifications to Superfish menu */ }
  79.   header.global .date-search {
  80.     height: 30px;
  81.     background: #fcfcfc;
  82.     border-top: 3px solid #dd374e; }
  83.   header.global .branding {
  84.     background: #2d2d2d;
  85.     height: 137px;
  86.     overflow: none;
  87.     border-top: 4px solid #dd374e; }
  88.     header.global .branding h1 {
  89.       margin: 0; }
  90.     header.global .branding img.logo {
  91.       margin: 18px 0 0 16px;
  92.       max-width: 80%;}
  93.   header.global nav {
  94.     font-family: "Droid Sans";
  95.     background: #2d2d2d;
  96.     border-top: 4px solid #dd374e;
  97.     /** Bonus - here's how to do a double border ;) **/
  98.     -webkit-box-shadow: 0px 4px 0px 0px #3a3a3a, 0px 8px 0px 0px #dd374e;
  99.     -moz-box-shadow: 0px 4px 0px 0px #3a3a3a, 0px 8px 0px 0px #dd374e;
  100.     box-shadow: 0px 4px 0px 0px #3a3a3a, 0px 8px 0px 0px #dd374e;
  101.     min-height: 40px; }
  102.     header.global nav #hamburger {
  103.       display: none;
  104.       cursor: pointer;
  105.       text-align: center;
  106.       line-height: 46px;
  107.       color: #dddddd; }
  108.       @media screen and (max-width: 768px) {
  109.         header.global nav #hamburger {
  110.           display: block; } }
  111.     header.global nav ul {
  112.       margin: 0;
  113.       padding: 0 25px;
  114.       display: block; }
  115.       @media screen and (max-width: 768px) {
  116.         header.global nav ul {
  117.           display: none;
  118.           margin: 7px 0;
  119.           padding: 0; } }
  120.       header.global nav ul li {
  121.         display: inline-block;
  122.         color: #dddddd;
  123.         line-height: 44px;
  124.         border-right: 1px solid #202020;
  125.         border-left: 1px solid #3a3a3a; }
  126.         @media screen and (max-width: 768px) {
  127.           header.global nav ul li {
  128.             width: 100%;
  129.             background: #2d2d2d;
  130.             border-left: none;
  131.             border-right: none;
  132.             border-top: 1px solid #474747;
  133.             border-bottom: 1px solid #141414; }
  134.             header.global nav ul li:first-child {
  135.               border-top: none; }
  136.             header.global nav ul li:last-child {
  137.               border-bottom: none; } }
  138.         header.global nav ul li:first-child {
  139.           border-left: none; }
  140.         header.global nav ul li:last-child {
  141.           border-right: none; }
  142.         header.global nav ul li:hover {
  143.           color: white; }
  144.           @media screen and (min-width: 768px) {
  145.             header.global nav ul li:hover > a {
  146.               position: relative; }
  147.               header.global nav ul li:hover > a:after {
  148.                 content: "";
  149.                 position: absolute;
  150.                 left: 20px;
  151.                 top: 40px;
  152.                 border-width: 0 8px 8px;
  153.                 border-style: solid;
  154.                 border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ef3636;
  155.                 display: block;
  156.                 width: 0;
  157.                 z-index: 999; } }
  158.         header.global nav ul li ul {
  159.           margin-top: 4px;
  160.           background: #2d2d2d;
  161.           border-top: 4px solid #dd374e;
  162.           padding: 0; }
  163.                 @media screen and (max-width: 768px) {
  164.           header.global nav ul li ul {
  165.             width: 100% !important;
  166.           }
  167.         }
  168.           header.global nav ul li ul li {
  169.             border-top: 1px solid #474747;
  170.             border-bottom: 1px solid #141414;
  171.             border-right: none;
  172.             border-left: none; }
  173.             header.global nav ul li ul li:first-child {
  174.               border-top: none; }
  175.             header.global nav ul li ul li:last-child {
  176.               border-bottom: none; }
  177.             header.global nav ul li ul li a {
  178.               padding: 10px 15px;
  179.               line-height: 1em; }
  180.             header.global nav ul li ul li:hover {
  181.               padding-left: 5px;
  182.               -webkit-transition-property: all;
  183.               -moz-transition-property: all;
  184.               -o-transition-property: all;
  185.               transition-property: all;
  186.               -webkit-transition-duration: 0.5s;
  187.               -moz-transition-duration: 0.5s;
  188.               -o-transition-duration: 0.5s;
  189.               transition-duration: 0.5s; }
  190.               @media screen and (min-width: 768px) {
  191.                 header.global nav ul li ul li:hover a:after {
  192.                   border: none; } }
  193.         header.global nav ul li a {
  194.           text-decoration: none;
  195.           color: #dddddd;
  196.           padding: 0 22px; }
  197.           header.global nav ul li a:hover {
  198.             color: white; }
  199.         header.global nav ul li.home {
  200.           min-width: 46px;
  201.           background: #dd374e;
  202.           border-right: none;
  203.           text-align: center;
  204.           height: 30px;
  205.           padding-top: 14px;}
  206.           header.global nav ul li.home span {
  207.             display: none; }
  208.         header.global nav ul li .sub-indicator, header.global nav ul li .top-menu ul li a .sub-indicator {
  209.           right: 7px;
  210.           top: 50%;
  211.           margin-top: -2px;
  212.           position: absolute;
  213.           display: inline-block;
  214.           content: '';
  215.           width: 0;
  216.           height: 0;
  217.           border: 4px solid rgba(0, 0, 0, 0);
  218.           border-top: 4px solid #dddddd; }
  219.  
  220. </style>
  221.  
  222. <script>
  223. /** hoverIntent **/
  224. (function(a){a.fn.hoverIntent=function(m,d,h){var j={interval:100,sensitivity:7,timeout:0};if(typeof m==="object"){j=a.extend(j,m)}else{if(a.isFunction(d)){j=a.extend(j,{over:m,out:d,selector:h})}else{j=a.extend(j,{over:m,out:m,selector:d})}}var l,k,g,f;var e=function(n){l=n.pageX;k=n.pageY};var c=function(o,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);if((Math.abs(g-l)+Math.abs(f-k))<j.sensitivity){a(n).off("mousemove.hoverIntent",e);n.hoverIntent_s=1;return j.over.apply(n,[o])}else{g=l;f=k;n.hoverIntent_t=setTimeout(function(){c(o,n)},j.interval)}};var i=function(o,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);n.hoverIntent_s=0;return j.out.apply(n,[o])};var b=function(p){var o=jQuery.extend({},p);var n=this;if(n.hoverIntent_t){n.hoverIntent_t=clearTimeout(n.hoverIntent_t)}if(p.type=="mouseenter"){g=o.pageX;f=o.pageY;a(n).on("mousemove.hoverIntent",e);if(n.hoverIntent_s!=1){n.hoverIntent_t=setTimeout(function(){c(o,n)},j.interval)}}else{a(n).off("mousemove.hoverIntent",e);if(n.hoverIntent_s==1){n.hoverIntent_t=setTimeout(function(){i(o,n)},j.timeout)}}};return this.on({"mouseenter.hoverIntent":b,"mouseleave.hoverIntent":b},j.selector)}})(jQuery);
  225.  
  226. /** Superfish **/
  227. (function(b){var a=(function(){var o={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},e=(function(){var c=/iPhone|iPad|iPod/i.test(navigator.userAgent);if(c){b(window).load(function(){b("body").children().on("click",b.noop)})}return c})(),j=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),l=function(r,s){var c=o.menuClass;if(s.cssArrows){c+=" "+o.menuArrowClass}r.toggleClass(c)},q=function(c,r){return c.find("li."+r.pathClass).slice(0,r.pathLevels).addClass(r.hoverClass+" "+o.bcClass).filter(function(){return(b(this).children(r.popUpSelector).hide().show().length)}).removeClass(r.pathClass)},m=function(c){c.children("a").toggleClass(o.anchorClass)},f=function(c){var r=c.css("ms-touch-action");r=(r==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",r)},i=function(s,t){var c="li:has("+t.popUpSelector+")";if(b.fn.hoverIntent&&!t.disableHI){s.hoverIntent(k,g,c)}else{s.on("mouseenter.superfish",c,k).on("mouseleave.superfish",c,g)}var r="MSPointerDown.superfish";if(!e){r+=" touchend.superfish"}if(j){r+=" mousedown.superfish"}s.on("focusin.superfish","li",k).on("focusout.superfish","li",g).on(r,"a",t,h)},h=function(s){var r=b(this),c=r.siblings(s.data.popUpSelector);if(c.length>0&&c.is(":hidden")){r.one("click.superfish",false);if(s.type==="MSPointerDown"){r.trigger("focus")}else{b.proxy(k,r.parent("li"))()}}},k=function(){var c=b(this),r=n(c);clearTimeout(r.sfTimer);c.siblings().superfish("hide").end().superfish("show")},g=function(){var c=b(this),r=n(c);if(e){b.proxy(p,c,r)()}else{clearTimeout(r.sfTimer);r.sfTimer=setTimeout(b.proxy(p,c,r),r.delay)}},p=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(d(this));if(c.$path.length){b.proxy(k,c.$path)()}}},d=function(c){return c.closest("."+o.menuClass)},n=function(c){return d(c).data("sf-options")};return{hide:function(r){if(this.length){var u=this,v=n(u);if(!v){return this}var s=(v.retainPath===true)?v.$path:"",c=u.find("li."+v.hoverClass).add(this).not(s).removeClass(v.hoverClass).children(v.popUpSelector),t=v.speedOut;if(r){c.show();t=0}v.retainPath=false;v.onBeforeHide.call(c);c.stop(true,true).animate(v.animationOut,t,function(){var w=b(this);v.onHide.call(w)})}return this},show:function(){var s=n(this);if(!s){return this}var r=this.addClass(s.hoverClass),c=r.children(s.popUpSelector);s.onBeforeShow.call(c);c.stop(true,true).animate(s.animation,s.speed,function(){s.onShow.call(c)});return this},destroy:function(){return this.each(function(){var r=b(this),s=r.data("sf-options"),c;if(!s){return false}c=r.find(s.popUpSelector).parent("li");clearTimeout(s.sfTimer);l(r,s);m(c);f(r);r.off(".superfish").off(".hoverIntent");c.children(s.popUpSelector).attr("style",function(t,u){return u.replace(/display[^;]+;?/g,"")});s.$path.removeClass(s.hoverClass+" "+o.bcClass).addClass(s.pathClass);r.find("."+s.hoverClass).removeClass(s.hoverClass);s.onDestroy.call(r);r.removeData("sf-options")})},init:function(c){return this.each(function(){var s=b(this);if(s.data("sf-options")){return false}var t=b.extend({},b.fn.superfish.defaults,c),r=s.find(t.popUpSelector).parent("li");t.$path=q(s,t);s.data("sf-options",t);l(s,t);m(r);f(s);i(s,t);r.not("."+o.bcClass).superfish("hide",true);t.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={popUpSelector:"ul,.sf-mega",hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true,disableHI:false,onInit:b.noop,onBeforeShow:b.noop,onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop,onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
  228.  
  229. /** Supersubs **/
  230. (function(a){a.fn.supersubs=function(b){var c=a.extend({},a.fn.supersubs.defaults,b);return this.each(function(){var d=a(this);var e=a.meta?a.extend({},c,d.data()):c;$ULs=d.find("ul").show();var f=a('<li id="menu-fontsize">&#8212;</li>').css({padding:0,position:"absolute",top:"-999em",width:"auto"}).appendTo(d)[0].clientWidth;a("#menu-fontsize").remove();$ULs.each(function(l){var k=a(this);var j=k.children();var g=j.children("a");var m=j.css("white-space","nowrap").css("float");k.add(j).add(g).css({"float":"none",width:"auto"});var h=k[0].clientWidth/f;h+=e.extraWidth;if(h>e.maxWidth){h=e.maxWidth}else{if(h<e.minWidth){h=e.minWidth}}h+="em";k.css("width",h);j.css({"float":m,width:"100%","white-space":"normal"}).each(function(){var n=a(this).children("ul");var i=n.css("left")!==undefined?"left":"right";n.css(i,"100%")})}).hide()})};a.fn.supersubs.defaults={minWidth:9,maxWidth:25,extraWidth:0}})(jQuery);
  231.  
  232. /** Custom jQuery and JS Actions **/
  233. var delay=(function(){var a=0;return function(c,b){clearTimeout(a);a=setTimeout(c,b)}})();jQuery(function(a){a("ul.sf-menu").supersubs({minWidth:12,maxWidth:27,extraWidth:1}).superfish();a("#hamburger").click(function(){a(".sf-menu").toggle()});a(window).resize(function(){delay(function(){if(a(document).width()>768){a(".sf-menu").css("display","block")}},500)})});
  234.  
  235. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!