Modul Site Nav

Hlavní navigace webu.

Na velkých displejích vedle sebe, na malých většina schovaná do ikonek.

Tři části navigace

  • .site-nav__accom-search-link – odkaz na vyhledávač ubytování
  • .site-nav__main – hlavní navigace, zobrazuje se jen na velkých displejích (řízeno Pine.JS)
  • .site-nav__small-screen – zobrazuje se jen na malých displejích

Příklad

Využívá Pine.JS responzivní navigaci

TODO

Fix spatneho vyhlazovani caretu na FF

Obecné stylování + malé displeje

TODO

  • .container mess

Layout: Všechny tři subnavigace jsou na malých displejích vedle sebe

Odkazy pro malé displeje

Na malých zobrazuje odkaz na vyhledávání a menu

Na malých displejích schovaná (Pine.js), na velkých zobrazená

Položka navigace obecně

Stylování od 2. úrovně dál

Velké displeje

@import "../lib/pine/pine.less";

@p-base-font-size				  				: @base-font-size;
@p-color                          : white;
@p-background                     : @color-beta;
@p-active-background              : @color-gamma;
@p-hover-background               : @color-gamma;
@p-small-screen-top               : 146px;
@p-large-display-start						: @large-start-value;

.pine-has-subnav > a:before {
  border-style: inset;
}




.site-nav {
	clear: both;
	background: @color-beta;
	height: 41px;
  border-bottom: @color-gamma 10px solid;
	border-top: @color-delta 10px solid;

	@media @large-start {
		padding-left: 15px;
		padding-right: 15px;
	}

  @media print {
    display: none;
  }
}

.site-nav li {
	list-style-type: none;
}


.site-nav__accom-search-link,
.site-nav__main,
.site-nav__small-screen {
  display: inline-block;
  float: left;
}

.site-nav__accom-search-link {
  margin: 0;
  padding: 0;
}


.site-nav__small-screen {
  padding: 0;
  margin: 0;
  display: none;

  @media @small-end {
    display: block;
    width: 130px;
    margin-right: -2px; // Hack kvuli pozici na iOS7
    float: right;
  }
}

.site-nav__small-screen {
  li {
    display: inline-block;
  }

  a.active {
    background-color: @color-gamma;
  }
}

@media @small-end {
  // Odkaz na fulltext vyhledávání - ikona
  .site-nav__small-screen-search {
    text-indent: -500px;
    width: 40px;
    background-image: url(../../images/glyphicons_027_search_white.png);
    background-repeat: no-repeat;
    background-position: center center;
  }

  // Odkaz na navigaci - ikona + text
  .container .site-nav .site-nav__small-screen-nav {
    width: 90px;
    padding-left: 40px;
    background-image: url(../../images/glyphicons_158_show_lines_white.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    margin-left: -5px; // -3 desktop, -5 iPhone TODO better prosim
  }
}


.container .site-nav a {
  .box-sizing(border-box);
  display: block;
  padding: 12px 15px 11px;
  color: #fff;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;

  // Aktivní položka
  &:hover,
  &:focus,
  &:active,
  &.active {
    color: white;
    text-decoration: none;
    background-color: @color-gamma;
  }
}

.container .pine-level-2 a {
  padding: @base-font-size*.75 15px (@base-font-size*.75 + 1px);
}



@media @large-start {

	// Položky navigací jsou na velkých vedle sebe
	.pine-level-1 > li {
		display: inline-block;
		position: relative;
		float: left;
	}

  // Položka navigace se subnavigací
  // Zobáček jinak než výchozí v Pine.js
  .container .pine-level-1 > .pine-has-subnav > a {
    padding-right: 25px;

    &:before {
      top: 19px;
      right: 11px;
      border-top-color: rgba(255, 255, 255, .5)
    }
  }

}