サポート » テーマ » テーマSightのメニューについて

  • 解決済 komato

    (@komato)


    こんばんわ。
    ただいま少々困っております。どなたかお分かりの方がいらっしゃったらぜひお教えください。

    こちらのテーマSightを使用しています。ナビゲーションメニュー(グローバルメニュー?)がドロップダウンメニューになっているのですが、2段目のテキストが1段目の幅で表示されるので2段目を改行されることなく表示されるにはどうしたらよいのでしょうか?

    CSSのナビゲーション部分は下記になります。

    style.css
    /*** Navigation ***/
    .nav {border-top: 1px solid #d9d9d9;}
    .dd {height: 48px;}
    .dd li {float: left; display: block; border-left: 1px solid #d9d9d9; text-align: center; font-size: 13px; text-transform: uppercase;}
    .dd li a {color: #000; text-decoration: none; display: block; padding-top: 18px; margin: 0 14px; white-space: nowrap;}
    .dd li a:hover {text-decoration: underline;}
    .dd li ul {position: absolute; padding: 8px 0 10px; visibility: hidden; background: #000; z-index: 100;}
    .dd li ul li {float: none; border: none; font-size: 11px; text-align: left; margin: 5px 0; padding: 0 8px;}
    .dd li ul li a {color: #fff; display: inline; margin: 0 !important; white-space: normal; padding-top: 0;}
    .dd li.dd_hover {background: #000;}
    a.dd_hover:hover {text-decoration: none !important;}
    .submenu a:hover {text-decoration: underline;}
    .dd li.parent a {margin: 0 8px; padding-right: 12px; background: url("images/dd.png") 100% 24px no-repeat;}
    .dd li.parent a.dd_hover {color: #fff; background: url("images/dd_hover.png") 100% 24px no-repeat; margin: 0 8px; padding-right: 12px; border-bottom: 1px solid #fff; padding-bottom: 10px;}

    .dd li ul li a {color: #fff; display: inline; margin: 0 !important; white-space: normal; padding-top: 0;}

    こちらの white-space: normal;部分を削除して文字は改行せずに表示させれたのですが、
    メニュー背景の色(黒い部分)は1段目の横幅のままで、いろいろと試してみたのですがまだCSSの勉強を始めたばかりで上手くいきませんでした。
    どこを直せばよいのかお教えいただければとても助かります。

    よろしくお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • デモを見ただけですが、

    .sub-menuに width:89px; インラインスタイルがあるようでした。

    DOMソースでしか見えないので、javascriptなどで、スタイルが書き込まれていませんか?

    CSSでインラインをオーバーライドする指定を書くといいと思います。

    id + class +important

    で指定すると、オーバーライドできるんじゃないかなと思います。(未テスト)

    トピック投稿者 komato

    (@komato)

    nobita様

    ご返答ありがとうございます!
    javascriptなのですね。早速確認してみたところ指定スタイルがありました!

    jQuery.noConflict();
    (function($) {
        $(function() {
            /*** Dropdown menu ***/
    
            var timeout    = 200;
            var closetimer = 0;
            var ddmenuitem = 0;
    
            function dd_open() {
                dd_canceltimer();
                dd_close();
                var liwidth = $(this).width();
                ddmenuitem = $(this).find('ul').css({'visibility': 'visible', 'width': liwidth});
                ddmenuitem.prev().addClass('dd_hover').parent().addClass('dd_hover');
            }
    
            function dd_close() {
                if(ddmenuitem) ddmenuitem.css('visibility', 'hidden').prev().removeClass('dd_hover').parent().removeClass('dd_hover');
            }
    
            function dd_timer() {closetimer = window.setTimeout(dd_close, timeout);
            }
    
            function dd_canceltimer() {
                if (closetimer) {
                    window.clearTimeout(closetimer);
                    closetimer = null;
                }
            }
            document.onclick = dd_close;
    
            $('#dd > li').bind('mouseover', dd_open);
            $('#dd > li').bind('mouseout',  dd_timer);
    
            $('#larr, #rarr').hide();
            $('.slideshow').hover(
                function(){
                    $('#larr, #rarr').show();
                }, function(){
                    $('#larr, #rarr').hide();
                }
    );

    そしてせっかく教えていただいた
    id + class +important
    なのですがどの様に使用したらよいのでしょうか?
    検索して調べてみてもわかりませんでした…。

    お時間ありましたらよろしくお願いします。

    id + class +important

    javascriptでインラインスタイルが設定されている場合、本当ならjavascriptを書き換えなくてはなりませんが、簡易的に、スタイルシートから、上書きするための指定の仕方です。

    詳細は、
    http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#specificity

    スタイルのセレクタに ID と クラス(または要素) と 宣言ブロックの値に!important を組み合わせて記述すると、インラインスタイルを上書きできますよ という意味です。

    トピック投稿者 komato

    (@komato)

    nobitaさま

    お返事ありがとうございました。
    !importantの使い方教えていただきありがとうございました。詳細ページと合わせて勉強したいとおもいます。

    !importantでCSSに2段目のwidth幅を設定する事はできたのですが、文字幅に合わせるのはできませんでしたが、これからいろいろ実験して探していきたいとおもいます。
    上手く出来ましたらご報告できたらとおもいます。

    ありがとうございました!

    トピック投稿者 komato

    (@komato)

    .dd li ul {position: absolute; width: auto !important;

    上記設定でやりたかったことができました。
    遅くなりましたが報告いたします。

    ありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「テーマSightのメニューについて」には新たに返信することはできません。