This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Animated menus for mobile-first webapps
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2017-06-18 11:40:29 UTC
mdgriffith/elm-style-animation 3.5.5 <= v < 4.0.0 3.5.5
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

Elm Sliding Menu

An Elm library for nested menus for mobile-first websites.

Demo

Installation

elm-package install simonh1000/elm-sliding-menus

Setup

import SlidingMenu

type alias Model =
    { menu : SlidingMenu.Model
    , userMessage : List String
    }

-- UPDATE

type Msg
    = MenuMsg SlidingMenu.Msg -- a message to relay SlidingMenu messages


myUpdateConfig : SlidingMenu.UpdateConfig
myUpdateConfig =
    { menu = menu
    , easing = Nothing -- using default easing
    }

-- Handle the 3-tuple return value from SlidingMenu.update
update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case message of
        MenuMsg msg ->
            let
                ( mm, cmd, maybeList ) =
                    SlidingMenu.update myUpdateConfig msg model.menu

                newModel =
                    { model
                        | menu = mm
                        , userMessage =
                            maybeList |> Maybe.withDefault model.userMessage
                    }
            in
                ( newModel, Cmd.map MenuMsg cmd )

-- VIEW

myViewConfig : SlidingMenu.ViewConfig
myViewConfig =
    { menu = menu
    , back = "Back"
    }

view : Model -> Html Msg
view model =
    div [ class "container" ]
        [ SlidingMenu.view myViewConfig model.menu |> Html.map MenuMsg
        , div [] [ text <| toString model.userMessage ]
        ]

-- Some data to use

menu : List SlidingMenu.MenuItem
menu =
    let categories =
        [ SlidingMenu.leaf "Food", SlidingMenu.leaf "Hotels", SlidingMenu.leaf "Bars" ]
    in
    [ SlidingMenu.node "Belgium" categories
    , SlidingMenu.node "France" categories
    , SlidingMenu.node "UK" categories
    ]