减少下拉按钮的宽度

时间:2014-04-24 11:13:51

标签: css3 sass zurb-foundation

我在新模板上使用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])

这是可能的还是我必须将其更改为按钮?

非常感谢任何建议

0 个答案:

没有答案