Question

我正在学习编码的第一步。我做了一些html，php，css，javascript和MySql的课程。现在我决定在构建Wordpress子主题的同时继续学习实践。

问题在于我试图学习如何在同一个div中叠加两个不同的字体系列。我的意思是这样的：

我发现可以使用content: attr(data-title);

对css做些什么

例如：

.button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: transparent;
  display: inline-block;
  height: 42px;
  padding: 0 1.5em;
  position: relative;
  border: none;
  outline: 0;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  line-height: 44px;
  color: #000000;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.button:after {
  content: attr(data-title);
  z-index: 1;
  font-size: 30px;
  color: #f00;
  font-weight: 100;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,800" rel="stylesheet">
<a href="javascript:void(0);" class="button" data-title="ABC">ABC</a>

现在我的一个大问题是我正在使用Wordpress而且php有点复杂。我想做的是为每个菜单项设置两种不同的字体。例如：

这是我菜单的代码php：

<?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
                ) );
            ?>
        </nav>
<?php endif; ?>

这就是css：

.main-navigation {
    font-family: pcablack;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1000;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

我试图做到这一点，但它没有像我期望的那样工作。似乎可能存在语法问题：

<?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>"

        data-title= '

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
            ) );
            ?>'
        >

            <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_class'     => 'primary-menu',
                ) );
            ?>
        </nav>
<?php endif; ?>

然后是css：

.main-navigation {
    font-family: pcablack;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1000;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

.main-navigation:after {
    content: attr(data-title);
    font-family: pcabold;
    color: green;
    font-size: 30px;
     word-spacing: -5px;
    /*position: relative;*/
    position: absolute;
    z-index: 1100;
    padding-bottom: 20px;
    margin-top: 48px;
    margin-left: 40px;
}

它不起作用。它只显示我的控制台错误。你有什么建议吗？

也许最简单的方法是复制菜单项的字体并叠加它？

其他问题是我的菜单是手风琴菜单。因此，如果我打开其中一个菜单的一部分，我会复制另一个菜单也应该自动打开。

Answer 1

天啊，你做错了。

您只需要将菜单项标题复制到数据属性。例如：

$('.main-menu ul a').each(function() {
  var text = $(this).html();
  $(this).attr('data-title', text);
});

.main-menu li a {
  position:relative;
   font-family: "Arial Black";
  font-size: 15px;
}

.main-menu li a:after {
    content: attr(data-title);
    position:absolute;
    font-family: "Arial Black";
    display:block;
  font-size: 14px;
    z-index:1;
    left:0;
    top:0;
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-menu">
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Why</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
</nav>

复制wordpress导航菜单

1 个答案: