1 つのロゴとナビゲーション リンクを含むヘッダーに Susy グリッドを適用しようとしました。しかし、私は自分では説明できない本当に予期しない動作に遭遇しました。HTML は次のようになります。
<header id="top" role="banner" class="headerstyle headerline">
<div class="sectionwrap">
<div itemscope itemtype="http://schema.org/Organization">
<a class="logohome" href="#gohome" title="Logo">
<span itemprop="logo" class="sitelogo" data-picture data-alt="Logo">
<span data-src="img/logo.png"></span>
<span data-src="img/logo_x2.png" data-media="(min-device-pixel-ratio: 2.0)"></span>
<!--[if (lt IE 9) & (!IEMobile)]>
<span data-src="img/logo.png"></span>
<![endif]-->
<span data-src="img/logo400.png" data-media="(min-width: 350px)"></span>
<span data-src="img/logo400_x2.png" data-media="(min-width: 350px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="img/logo800.png" data-media="(min-width: 800px)"></span>
<span data-src="img/logo800_x2.png" data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="img/logo1000.png" data-media="(min-width: 1000px)"></span>
<span data-src="img/logo1000_x2.png" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
<noscript>
<img itemprop="logo" class="sitlogo" src="img/logo.png" alt="Logo">
</noscript>
</span>
</a>
</div>
<nav role="navigation">
<ul class="navio" id="togglenav" tabindex="0">
<li>
<a href="#togglenav" class="icon-alone toggler" title="Menu">
<span aria-hidden="true" data-icon="t"></span>
<span class="screen-reader-text">Menu open and close</span>
</a>
</li><!--
--><li><a class="navessentials" href="#pointone">Point1</a></li><!--
--><li><a class="navessentials" href="#pointtwo">Point2</a></li><!--
--><li><a class="navessentials" href="#pointthree">Point3</a></li><!--
--><li><a class="navessentials" href="#pointfour">Point4</a></li><!--
--><li><a class="navessentials" href="#pointfive">Point5</a></li><!--
--><li class="togglereset" aria-hidden="true"><a href="#top">Back to top</a></li>
</ul>
</nav>
</div>
</header>
.sectionwarp は Susy コンテナーのクラスです。.logohome はロゴをホストします (Scott Jehls のピクチャフィルのコードを配置しました)。nav 要素には、5 つのメニュー ポイントを持つメニューと、フォント アイコンとしてのメニューのトグル ボタン、および開いているメニューを閉じるための非表示のリスト要素が含まれます。CSS のみのトグル ナビゲーションは、次の記事Toggle Navigationに基づいています。
.logohome{
float:left;
width:17em;
}
.toggler{
position: absolute;
z-index: 1001;
top: 0.55em;
right: 0.5em;
text-decoration: none;
cursor: pointer;
font-size: 2.75em; //3em
}
#togglenav li:not(:first-child) a {
@include tran(color, $navtext);
text-decoration: none;
@include tran(bg, $fixedheader, 0.95);
display: inline-block;
height: 3em;
line-height: 1.5em;
padding: .8em;
border-bottom: 1px solid orange;
width: 100%;
}
body:not(:target) #togglenav {
margin: 0;
padding-top: 5.3em;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1000;
}
body:not(:target) #togglenav li:not(:first-child) {
width: 100%;
height: 0;
line-height: 0;
overflow: hidden;
-webkit-transition: height 0.25s;
-moz-transition: height 0.25s;
-o-transition: height 0.25s;
transition: height 0.25s;
}
body:not(:target) #togglenav:target {
z-index: 1001;
}
body:not(:target) #togglenav:target .toggler {
z-index:-1;
}
body:not(:target) #togglenav:target li:not(:first-child) {
height: 3em;
line-height: auto;
overflow: visible;
-webkit-transition: height 0.25s;
-moz-transition: height 0.25s;
-o-transition: height 0.25s;
transition: height 0.25s;
}
body:not(:target) #togglenav:target .togglereset {
height: 0;
line-height: 0;
}
body:not(:target) #togglenav:target .togglereset a {
width: 100%;
background-color: transparent;
border: none;
height: auto;
position: absolute;
top: -101em;
bottom: -101em;
left: 0;
right: 0;
text-indent: -999em;
direction:ltr;
z-index: -1;
}
@include breakpoint($menutogglerswitch) {
.toggler {
display: none;
}
body:not(:target) #togglenav {
padding-top: 0;
float:right;
position:relative;
top:0.8em;
}
body:not(:target) #togglenav li:not(:first-child):not(:last-child) {
display: inline;
border: none;
}
body:not(:target) #togglenav li:not(:first-child) a {
line-height: 1.5em;
height: 2em;
width: auto;
border: none;
background-color: transparent;
padding: 0;
margin-left: 1.5em;
&:hover{
padding-bottom: 0;
margin-bottom: 0;
border-bottom:5px $navunderline solid;
}
}
body:not(:target) #togglenav .togglereset {
display: none;
}
}
トグル ボタンは絶対位置にあり、上に貼り付けられた現在のセットアップではすべて問題なく表示されます。ここで、ロゴを 1 つの列に配置し、小さなビューポートのトグルボタンと広いビューポートのナビゲーションを別の列に配置しようとしました。しかし、すでに最初のステップで、3 つのうちの 1 つが奇妙に振る舞います。さまざまな要素フックを試したり、トグル要素の絶対位置をオフにしたりして試してみましたが、何も役に立たず、なぜSusyがそのように動作するのか、何が間違っていたのか混乱しています。;) float:left と固定幅の .logohome を削除し、次のものに置き換えました。
.logohome {
@include span-columns(6,18);
outline: 1px solid green;
}
.toggler {
@include breakpoint(1px 899px) {
@include span-columns(12 omega,18);
outline:1px solid red;
}
}
.navio{
@include breakpoint(900px) {
@include span-columns(12 omega,18);
outline:1px solid yellow;
}
}
.navio と .logohome は、デスクトップ ビューポート (デスクトップ ビューポート) で期待どおりに動作します。しかし、モバイル ビューポート ( Mobile Viewport ) を見ると、 .toggler の列が広くなり、トグル アイコンの位置が絶対位置とは逆になります。.toggler 列とそのコンテンツが動作するように動作する理由に誰かが光を当てることができれば、私はうれしいです。前もってありがとうラルフ
