我在新模板上使用Foundation5,我目前正在heroku上托管,可以查看http://continentclothingcompany.herokuapp.com/
我正在尝试计算如何最好地减少Language
下拉列表的宽度,以便它适合2国家代码和箭头,但是在悬停时显示区域设置的全名?
类似的东西:
[ Fr ]
[ čeština ]
[ English ]
...
而不是
[ Fr ]
[ čeština ]
[ English ]
这是模板:
header
nav.first-bar.top-bar.clearFix(data-topbar data-options="is_hover: false")
ul.title-area#title
li.name#logoExtend
a(href="/")
li.toggle-topbar.menu-icon
a(href="#") Menu
section.first-bar-section.top-bar-section
ul.right
li.divider
li.section.clearFix
a(href="#") Contact
li.section.clearFix
a(href="#") Resources
li.divider
- if (!locals.user)
li.section.clearFix.has-dropdown.not-click
a(href="#" data-dropdown="login-drop")=t("ns.layout:user.login")
div.f-dropdown.content.dropdown#login-drop(data-dropdown-content)
h4=t("ns.forms:button.federated-login")
include "authenticate/federated-form.blade"
h4=t("ns.forms:button.login")
include "authenticate/login-form.blade"
- else
li.section.clearFix.has-dropdown.not-click
a(href="#") Profile
include "authenticate/profile-form.blade"
li.divider
li.section.clearFix.has-dropdown.not-click.lang-menu
- var langCodes = locals.settings.languages
- var curLang = i18n.lng()
- var langCode = curLang.substr(0, 2)
a.langSwitch(href="#")=t(langCode)
ul.dropdown
- for (var i in langCodes)
- if( i != curLang )
li.section.clearFix
a.langSwitch(href="#" data-lang=i)=t(langCodes[i])
nav.second-bar.top-bar#header.clearFix.skrollable.skrollable-between(data-0="top:30px;" data-30="top:0px;")
ul.title-area#title
li.name#logoExtend.skrollable.skrollable-between(data-0="width:110px; height:106px", data-30="width:80px; height:76px", style="width: 110px;")
a(href="/")
img.logo#logo(src="/images/logo.gif")
li.toggle-topbar.menu-icon
a(href="#") Menu
section.second-bar-section.top-bar-section
- if (!locals.user)
ul.right
li.divider
li.has-dropdown.not-click
a(href="#") COLLECTIONS
ul.dropdown#drop
li
a.continental(href="#") temp
li
a.earthpositive(href="#") temp
li
a.salvage(href="#") temp
li.divider
li.has-dropdown.not-click
a(href="#") PRODUCTS
ul.dropdown#drop
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li.divider
li.btn
a(href="#") ABOUT
li.divider
li.btn
a(href="#")
i.icon-basket
li.divider
li.btn
a(href="#", data-reveal-id="searchModal")
i.icon-search
- else
ul.right
li.divider
li.has-dropdown.not-click
a(href="#") COLLECTIONS
ul.dropdown#drop
li
a.continental(href="#") temp
li
a.earthpositive(href="#") temp
li
a.salvage(href="#") temp
li.divider
li.has-dropdown.not-click
a(href="#") PRODUCTS
ul.dropdown#drop
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li
a(href="#") temp
li.divider
li.btn
a(href="#") ABOUT
li.divider
li.btn
a(href="#")
i.icon-basket
li.divider
li.btn
a(href="#", data-reveal-id="searchModal")
i.icon-search
基本上这是构建语言下拉列表的代码:
li.section.clearFix.has-dropdown.not-click.lang-menu
- var langCodes = locals.settings.languages
- var curLang = i18n.lng()
- var langCode = curLang.substr(0, 2)
a.langSwitch(href="#")=t(langCode)
ul.dropdown
- for (var i in langCodes)
- if( i != curLang )
li.section.clearFix
a.langSwitch(href="#" data-lang=i)=t(langCodes[i])
这是可能的还是我必须将其更改为按钮?
非常感谢任何建议