https://github.com/simonh1000/elm-sliding-menus
Animated, nested menus for mobile-first Elm webapps - ★
https://github.com/simonh1000/elm-sliding-menus
Last synced: 2 months ago
JSON representation
Animated, nested menus for mobile-first Elm webapps - ★
- Host: GitHub
- URL: https://github.com/simonh1000/elm-sliding-menus
- Owner: simonh1000
- License: mit
- Created: 2017-06-18T09:48:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-03T11:11:22.000Z (over 6 years ago)
- Last Synced: 2025-03-20T19:29:40.221Z (3 months ago)
- Language: Elm
- Homepage: http://package.elm-lang.org/packages/simonh1000/elm-sliding-menus/latest
- Size: 1.55 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Elm Sliding Menu
An Elm library for nested menus for mobile-first websites.
## Demo
## Installation
elm-package install simonh1000/elm-sliding-menus
## Setup
```elm
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
]
```