An Elm library to create animated, nested menus (e.g. for mobile-first websites).
view : ViewConfig -> Model -> Html Msg
Renders the menu. The CSS heirarchy is:
.sliding
- menu
- container
ul.sliding
- menu
- page.previous
ul.sliding
- menu
- page.current
ul.sliding
- menu
- page.next
Note that .sliding-menu-page
is display : relative
, and .sliding-menu-page
is display : absolute
,
and the library animates the left
style. You will need to add an appropriate height
to .sliding-menu-page
{ menu : List MenuItem
, back : String
}
Data required for the view function. menu
is the data for the different layers of the menu; see below for how to make MenuItem
s.
back
is the string that will be used alongside a "<" to make the back item.
update : UpdateConfig -> Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg, Maybe (List String) )
update returns a 3-tuple of the model, a Cmd SlidingMenu.Msg
, and - following a user click - the menu path chosen by the user.
update message model =
case message of
MenuMsg msg ->
let
( menu, cmd, maybePath ) =
SlidingMenu.update myUpdateConfig msg model.menu
newModel =
{ model
| menu = menu
, chosenPath =
maybePath
|> Maybe.withDefault model.chosenPath
}
in
( newModel, Cmd.map MenuMsg cmd )
{ menu : List MenuItem
, easing : Maybe Animation.Interpolation
}
Data required for the update function. At present, menu is not used but is required here to prevent
a breaking change down the line. The easing
function can be any elm-animation Interpolation with the default
set to 'zippy' spring.
subscriptions : Model -> Platform.Sub.Sub Msg
This subscription must be added in your main
function.
subscriptions : Model -> Sub Msg
subscriptions { menu } =
Sub.map MenuMsg (SlidingMenu.subscriptions menu)
Opaque type
Opaque type that you will need to add to your model.
type alias Model =
{ menu : SlidingMenu.Model
, ...
}
init : Model
init
Opaque type: models a heirarchical menu.
leaf : String -> MenuItem
Helper function build a leaf MenuItem
node : String -> List MenuItem -> MenuItem
Helper function to build parent MenuItem