1

http://www.austintexas.gov/governmentと同様に、アクティブなときにメニュー ボタンを大きくしたいと考えています。

これが私のメインメニューのcssです

#mobileMenu_mm1 {
  margin: 10px 20px;
  padding: 3px 0px;}

#navigation {
  margin: 0px auto;
  float: left;}

#main-menu{
  clear: both;
  float: left;
  color: #fff;
  font-size: 18px;
  margin: 0px auto;
  overflow: hidden;
  width: 100%;}

#main-menu ul {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  padding: 0px 15px;}

#main-menu li {
  float: left;
  list-style-type: none;
  font-weight: 400;
  color: #333 !important;
  background: rgb(0, 25, 60);
  background: rgba(0, 25, 60, 0.9);}

#main-menu li a {
  color: #777;
  display: block;
  padding: 7px 7px 7px 7px;
  text-decoration: none;
  line-height: 12px;}

/*----------------------MENU SPECIFIC COLORS--------------*/
#main-menu li#dhtml_menu-305{
 border-radius:  15px 15px 0px 0px;
 border-right: 2px solid #e6e7de;
 background: #D1B37F;
}
#main-menu li#dhtml_menu-50692{
 border-radius:  15px 15px 0px 0px;
 border-right: 2px solid #e6e7de;
 background: #ffff90;
}
#main-menu li#dhtml_menu-50690{
 border-radius:  15px 15px 0px 0px;
 border-right: 2px solid #e6e7de;
 background: lightblue;
}

#main-menu li#dhtml_menu-50207{
 border-radius:  15px 15px 0px 0px;
 border-right: 2px solid #e6e7de;
 background: #CAC37F;
 }

#main-menu li#dhtml_menu-50207 li{
 background: #CAC37F;
 }

#main-menu li#dhtml_menu-50691{
  border-radius:  15px 15px 0px 0px;
  background: #E4B04A;
}

#main-menu li a:hover {
  border-radius:  15px 15px 0px 0px;
  background: rgb(200, 200, 200);
  background: rgba(200, 200, 200, 0.7);
  height: 35px;}

#main-menu li a .sf-sub-indicator {
  display: block;
  overflow: hidden;
  position: absolute;
  z-index: 15;
  text-indent: -9999px;}

#main-menu li ul li a,
#main-menu li ul li a:link,
#main-menu li ul li a:visited {
  border-top-width: 0;
  color: #fff;
  font-size: 14px;
  padding: 10px 10px;
  text-transform: none;
  line-height: 13px;
  width: 105px;}

#main-menu li ul {
  height: auto;
  padding: 0px 0px;
  left: -9999px;
  margin: 0 0 0 -2px;
  position: absolute;
  z-index: 15;
  width: 0px;}

#main-menu li ul a {width: 110px;}
#main-menu li ul ul {margin: -33px 0 0 124px;}
#main-menu li:hover>ul,
#main-menu li.sfHover ul {left: auto;}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {list-style:none;}
#main-menu ul.menu li {margin: 0;}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {margin: 0;padding: 0;}

HTML/PHP

  <nav id="navigation" role="navigation">
      <div id="main-menu">
        <?php 
        $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu')); 
        print drupal_render($main_menu_tree);
        ?>
      </div>
  </nav><!-- end main-menu -->

  <?php if ($page['header']): ?>
   <div id="header" class="sixteen columns" style="margin: 0; padding: 0;>
    <?php print render($page['header']); ?>
   </div>
   <?php endif; ?>
</div>
     </div>
  </header>

ここにスクリーンショットがあります ここをクリック

私が試したこと

私はすでに :active と :current を使ってみました。何らかの理由で、メニューの最初のボタンだけにアクティブなクラスが与えられています。乾杯！

4

2 に答える 2

0

実際の例に勝るものはありません:

http://jsfiddle.net/g105b/76JDZ/

ここに画像の説明を入力

activeこの例では JavaScript を使用して現在選択されている要素にクラスを追加してliいますが、探している効果は純粋に CSS です。

Drupal の特徴はactive、現在選択されているにクラス名を自動的に追加するliことです。そのため、リンクされた例の JavaScript を完全に無視して、CSS に示されている概念をそのまま使用できます。

于 2012-07-30T11:46:29.697 に答える
0

.activeクラス名を使用します。Drupal のすべてのアクティブなメニュー リンクにはクラス名がありactiveます。

#main-menu li.active

子を持つメニュー リンクのみを選択する場合は、.expandedクラス名を使用します。

#main-menu li.expanded

これがうまくいくことを願っています...ムハンマド。

于 2012-07-03T14:09:40.083 に答える