main-menu: wie mit css stylen?
Eingetragen von HugiN (4)am 29.12.2011 - 03:11 Uhr in
Ich stehe vor folgendem Problem:
Ich habe ein Sprite, welches ich für die Hauptnavigation verwenden möchte. Und zwar wird jedes einzelne li Element mit einer separaten Klasse angesprochen. Das sieht dann etwa so aus:
HTML:
<div id="topnav">
<ul id="menu" class="menu">
<li class="menu-1"><a href="#"><span>Home</span></a></li>
<li class="menu-2"><a href="#"><span>Game</span></a></li>
<li class="menu-3"><a href="#"><span>Forum</span></a></li>
<li class="menu-4"><a href="#"><span>Wiki</span></a></li>
<li class="menu-5"><a href="#"><span>Media</span></a></li>
<li class="menu-6"><a href="#"><span>Services</span></a></li>
</ul>
</div><!-- END #topnav -->CSS:
#topnav {
float:right;
margin: 35px 15px 0 0;
}
/*BASIC MENU STYLING*/
ul#menu{
margin:0; padding:0;
list-style:none;
clear:both;
}
#menu li{
overflow:hidden; display:inline; float:left;
}
/*LOCATE TO THE SPRITE FOR THE MENU*/
#menu li a{
background:url('../css/images/page_elements/topnavi.png') no-repeat;
width:100%; height:100%;
display:block;
}
/*BASIC LIST TEXT STYLING*/
li a .menu {
text-align: center;
color: #FFE2AD;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 black, 0 0 5px #A6432D;
}
li a:hover a:active {}
/*SPAN TAG FOR ALIGNMENT OF THE TEXT INSIDE THE BUTTONS*/
#menu li a span {
display: block;
text-align: center;
height: 20px;
padding-top: 50px;
padding-right: 2px;
}
/* INDIVIDUAL MENU LINKS */
#menu li.menu-1{width:108px; height:75px;}
#menu li.menu-1 a{background-position:0px 0px;}
#menu li.menu-1 a:hover{background-position:0px -75px;}
#menu li.menu-2{width:108px; height:75px;}
#menu li.menu-2 a{background-position:-108px 0px;}
#menu li.menu-2 a:hover{background-position:-108px -75px;}
#menu li.menu-3{width:108px; height:75px;}
#menu li.menu-3 a{background-position:-216px 0px;}
#menu li.menu-3 a:hover{background-position:-216px -75px;}
#menu li.menu-4{width:108px; height:75px;}
#menu li.menu-4 a{background-position:-324px 0px;}
#menu li.menu-4 a:hover{background-position:-324px -75px;}
#menu li.menu-5{width:108px; height:75px;}
#menu li.menu-5 a{background-position:-432px 0px;}
#menu li.menu-5 a:hover{background-position:-432px -75px;}
#menu li.menu-6{width:110px; height:75px;}
#menu li.menu-6 a{background-position:-540px 0px;}
#menu li.menu-6 a:hover{background-position:-540px -75px;} Wie kann ich erreichen, dass Drupal das Menü als Liste auszeichnet, die ich dann mit meinem CSS ansprechen kann?
- Anmelden oder Registrieren um Kommentare zu schreiben
Hi HugIn Zitat: Wie kann ich
am 29.12.2011 - 11:46 Uhr
Hi HugIn
Wie kann ich erreichen, dass Drupal das Menü als Liste auszeichnet, die ich dann mit meinem CSS ansprechen kann?
na durch theming !?!
wie sieht denn die struktur von deiner 'Hauptnavigation' aus?
Bzw welches Theme benurt du?
Theming ist im Prinzip ganz einfach (wenn mensch weiss wie :))
ein Weg wäre:
-> du erstellst ein Subtheme
-> du identifizierst das Array Element welches als 'Hauptnavigation' zb in deiner page.tpl.php gerendert wird
installiere dir dazu das modu devel bzw theme developer
drupal.org/project/devel
damit kann du dir schön das array ausgeben lassen mit
dsm($content)dann kannst du das deinen bedürfnissen nach anpassen
besser ist es wenn du dir gleich das template für das menu vornimmst
und davon ein eigenes template anlegest in deinem theme
welches template da genutzt wird und wie du das benannt werden muss
kannst du mit dem modul
drupal.org/project/devel_themer
sehen
besten gruss
stef
Vielen Dank für Deine
am 29.12.2011 - 13:02 Uhr
Vielen Dank für Deine Antwort. Hab natürlich vergessen zu schreiben, dass ich ein eigenes Subtheme von ZEN erstellt habe. Allerdings ist es mein erstes eigenes Theme mit Drupal. In meiner page--front.tpl.php wird mein main menu folgendermassen gerendert:
<?php if ($page['navigation'] || $main_menu): ?>
<div id="navigation"><div class="section clearfix">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu',
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
<?php print render($page['navigation']); ?>
</div></div><!-- /.section, /#navigation -->
<?php endif; ?>
Ich sehe, dass id=main-menu und class=links, inline, clearfix ist. Das ist ja schon mal gut - aber: Damit ich die unterschiedlichen Bereiche des Sprites ansprechen kann, brauche ich für jeden einzelnen Menupunkt eine einzigartige und fest vergebene class. Wenn ich mir also den Quelltext der Seite im Browser ansehe, dann schaut das folgendermassen aus:
<ul id="main-menu" class="links inline clearfix"><li class="menu-372 first"><a href="/drupal/taxonomy/term/37" title="">News</a></li>
<li class="menu-357"><a href="/drupal/taxonomy/term/7" title="">Game Info</a></li>
<li class="menu-358"><a href="/drupal/taxonomy/term/9" title="">Competitive</a></li>
<li class="menu-359"><a href="/drupal/taxonomy/term/8" title="">Media</a></li>
<li class="menu-385 last"><a href="/drupal/content/about" title="Find out everything about us">About</a></li>
</ul>
Meine Frage also: kann ich nun einfach im CSS die class z.b. "menu-357" nennen und es funktioniert? Oder werden diese Menüklassen gegebenenfalls dynamisch verändert?
Gruss - Thomas