0

我有一个以页面为中心的水平导航，带有徽标和内容。页面上有语言翻译，如英语（默认）、法语、俄语和德语。当您点击这些链接时，网站上的文字会发生变化。

我唯一的问题是，当语言从英语更改为俄语或德语时，导航上的文本会随着单词的变长而中断（它的内容只需要在一行上导航！）。这不吸引人，我不能将文本放在页面上，因为每一侧都有一个样式和一个文本必须保留在其中的边框顶部。

我唯一的解决方案是根据所选语言更改填充/字体大小？（除非有人知道更好的解决方案）。

我只能想创建某种 jQuery 函数来检测哪种语言处于活动状态（因为语言列表在选择时有一个活动类），然后根据语言更改或向导航类添加 css 样式？

希望任何人都可以在正确的方向或相关信息的任何链接上帮助我。

我将把我的 html 和 css 标记/演示放在这里，但可能没有任何帮助：

html示例：

<div id = "navigation">
   <ul class "nav">
      <li> <a href...... class="active">link</a></li>
   <ul>
</div>

我的语言列表基本上与右上角的菜单几乎相同。

CSS：

.nav {
    width:80%;
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:auto;
    padding:0;
    text-align:center;
}

.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px 5px;
}
4

2 回答 2

3

您可以为您的<body>标签分配一个独特的语言类，并使用它根据所选语言将特定样式应用于您的导航。

例子：

<body class="language-english">...

然后对于 CSS...

.language-english .nav { font-size: 12px; }

您还可以考虑更长的翻译文本，并使您的导航更加动态/流畅，以适应不同的文本长度。

于 2013-05-20T21:17:53.367 回答
0

和 jQuery 解决方案： 

 $(document).ready(function() {    
        $('#navigation a').on('click', function() { 
          if( $(this).attr('href') == 'russian' || $(this).attr('href') == 'german') {
            $('.nav').css('fontSize', '11px');
          };
        });
    })

根据 href 属性更改字符串 'russian' 和 'german'。

于 2013-05-20T21:43:45.837 回答