在Rails上使用语义UI创建汉堡导航栏

时间:2018-09-03 16:25:28

标签: ruby-on-rails navbar haml semantic-ui

我正在尝试使用Rails上的语义UI创建一个汉堡菜单,但是它不起作用。在导航栏上,我有徽标Recipeazy,然后有3个项目,“主页”,“关于我们”和“设置”,然后有2个按钮:创建新的食谱,然后退出。 (如果用户未登录,则只有两个按钮,“登录”和“注册”。我使用ruby编写了if else语句)。我尝试做某人在here上所做的事情,但是没有用。因此,我尝试检查语义UI网页的侧边栏,但仍然无法正常工作。我想坚持使用语义UI的侧边栏。这是我的代码:

application.html.haml

!!!
%html
  %head
    %title Recipeazy
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    %link{:rel => "stylesheet", :href => "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"}
    %link{:rel => "stylesheet", :href => "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"}

    = csrf_meta_tags
%body
    %div.ui.fixed.inverted.main.menu
        %div.ui.container
            %a.launch.icon.item
                %i.content.icon
            .wrapper.clearfix
                %div.brand.item
                    #logo= link_to "Recipeazy", root_path
                    %nav
                    - if user_signed_in?
                        %div.item
                            = link_to root_path do
                                %i.fa.fa-home
                                Home
                        %div.item
                            = link_to about_path do
                                %i.fa.fa-book
                                About Us
                        %div.item
                            = link_to edit_user_registration_path do
                                %i.fa.fa-cog
                                Settings
                        %div.item
                            = link_to new_post_path, class: "button" do
                                %i.fa.fa-plus
                                Add Recipe
                        %div.item
                            = link_to destroy_user_session_path, class:"button", method: :delete do
                                %i.fa.fa-sign-out
                                Sign Out
                    - else
                        %item
                            = link_to "Log In", new_user_session_path, class: "button"
                        %item
                            = link_to "Sign Up", new_user_registration_path, class: "button"

    %p.notice= notice
    %p.alert= alert
    .wrapper
        = yield

我认为语义UI可以正常工作,因为我已经使用它来设置其他页面上的按钮的样式。

0 个答案:

没有答案