2016-05-07 1 views
0

"CSSリストメニュー" Webパーツを使用してKentico 9でメニューを作成しました。 CSSを使用してスタイルを設定しましたが、新しいページメニュー項目を追加するまではすべてうまくいきました。今度は、項目がナビゲーション内の1行に収まらなくなりました。ドキュメント名の長さが不均一なので、理想的には長いタイトルのアンパサンドに改行を追加するだけです。 (私はCSSを使用して特定の文字に基づいて改行を挿入する方法を見つけられませんでした)<li>要素の間で均等に幅を分割すると、最初のタイトルが3行にプッシュされ、メニュー項目魅力的ではありません。気をつけておくべきことは、各親ページの最初のレベルの子ページをその下に表示するホバー機能です。KentcoのCSSリストメニューで使用されるページ名に改行を挿入する9

現在のメニューの外観は:

Current menu appearance

私がチェックされているWebパーツと、「ワードラップ」への重要な変更を加えていません。ここでCSSのコードは次のとおりです。

/* Horizontal menu - main menu */ 
 

 
header nav { 
 
    text-align: center; 
 
    width: 100%; /* Container width is 960px */ 
 
    background-color: rgb(1, 69, 106); 
 
    box-sizing: border-box; 
 
} 
 

 
header nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 0; 
 
} 
 

 
header nav ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding:0; 
 
    font-size: 1.15em; 
 
} 
 

 
header nav ul li a { 
 
    text-decoration: none; 
 
    border: 10px solid rgb(1, 69, 106); 
 
    display: block; 
 
} 
 

 
header nav ul li a:visited { 
 
    color: rgb(234, 161, 23); 
 
} 
 

 
header nav ul li a:hover, 
 
header nav ul li a:active, 
 
header nav ul li a:focus { 
 
    text-decoration: none; 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(8, 96, 143); 
 
    border: 10px solid rgb(8, 96, 143); 
 
} 
 

 
header nav ul ul { 
 
    display: none; 
 
} 
 

 
header nav ul li:hover ul { 
 
    display: block; 
 
    background-color: rgb(1, 69, 106); 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
header nav ul li ul li { 
 
    font-size: 1em; 
 
    width: 100%; 
 
    z-index: 1; 
 
    background-color: rgb(1, 69, 106); 
 
} 
 

 
header nav ul li ul li a { 
 
    border: 5px solid rgb(1, 69, 106); 
 
    display: block; 
 
} 
 

 
header nav ul li ul li a:hover, 
 
header nav ul li ul li a:active, 
 
header nav ul li ul li a:focus { 
 
    border: 5px solid rgb(8, 96, 143); 
 
} 
 

 
header nav ul ul ul li { 
 
    display: none; 
 
}

答えて

0

あなたは、ページのプロパティの下で、各ページにクラスまたはスタイルを追加することができます - >ナビゲーション - これは、各ページ上部のナビゲーションで別のクラスを持つことができることを意味します。あなたが明示的に各メニューアイテムの幅を指定し、ワードラップを追加することができる場所でこれを持っ:

.myNavItem1 { 
    white-space: normal; 
    width: 80px; 
} 

別のアプローチは、ドロップダウンメニューを使用している - それはテーブルとしてレンダリングするので、次の行にアイテムを移動させることはありませんが、私個人的にはテーブルが好きではありません。十分な柔軟性がないからです。