使用 div 和 css 块样式在 Drupal 中创建智能按钮菜单

Question

您好，我一直在尝试在 drupal 块中创建一个智能按钮菜单集，它会记住单击了哪个按钮（它在哪个站点上）。出于无关紧要的原因，它不是菜单，而是块内项目。我在线创建了以下内容：

<div><a href="site1" class="button" style="width: 110px;">Overview</a></div>
<div><a href="site2" class="button" style="width: 120px;">Instruments</a></div>
<div><a href="site3" class="button" style="width: 110px;">Travel</a></div>

这与以下 css 相结合产生可爱的按钮：

.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}

.button:hover {
background-color: green;
color: white;}

.button:focus {
background-color: green;
color: white;}

.button:active {
background-color: green;
color: white;}

所以上面的一切都很好。但是，绿色激活颜色不会保留。我一点击它就会恢复到之前的状态。我希望它 'show' 它所在的页面有颜色变化，只有当前选择的按钮才会有绿色。除了那个小问题，我没有什么效果很好。我在网站上浏览了一下，这里有一些不起作用的东西： --> 内联 php，创建错误 link 不可读，如果我将 class 定义为使用不同颜色选择，这不起作用：

<a href="site1" class="<?php if(page() == "foobar") echo "selected"; else echo "button" ?>">Overview</a>

同样不起作用的是在 <a href > 或 <div> 中定义一个额外的 class 使其成为 'selected'，如果我使用 [=35] 充其量=] 文件并执行

.selected a { 颜色：绿色； } #selected a {颜色：绿色：}

我可以将颜色永久更改为绿色，这根本不是我想要的。我之前看到过使用列表 <li id="selected"> 创建菜单的讨论，但这不仅没有像我的 div 格式那样给我非常好的按钮，而且它也完全不起作用。参见：CSS: How to change colour of active navigation page menu

颜色只是永久改变，我只希望它在 page=page of link 时改变颜色。因为我使用 div 这意味着我也不能使用其他伪 class 选择器技巧，如 :target 或 :root。我有一种感觉 php 是要走的路，但我不知道为什么不能从我的 drupal 框项目中在线读取它。内联 html 或 css 没有问题。有什么想法吗？

Answer 1

试试这个代码

CSS

.button:active, .button.selected {
  background-color: green;
  color: white;
}

PHP

<a href="site1" class="<?php if(page() == "foobar") echo "selected button"; else echo "button"; ?>">Overview</a>

你写的是其他东西... .selected a 定位锚标记内带有 class "selected" 的任何元素，您的意思是选择了 class 的锚标记 = a.selected

Answer 2

好的，我收到系统管理员的回复，Drupal 安全设置不允许 in-line php 或 java 脚本。使用 div 语句实际上无法做到这一点。唯一的方法是删除所有内容并制作一个新的菜单块类型块。在菜单块中 psuedo-class :active 如果您使用 css

将保持活动状态

li .active

否则你可以尝试启用 php 但大多数 drupal 区域不允许或 java 脚本（至少我所在的地方不允许）。

使用 div 和 css 块样式在 Drupal 中创建智能按钮菜单

Creating a smart button menu in Drupal with in block div and css style

html

css

php

drupal

button