simonh1000 / elm-sliding-menus / SlidingMenu

An Elm library to create animated, nested menus (e.g. for mobile-first websites).

View

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


type alias ViewConfig =
{ 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 MenuItems. back is the string that will be used alongside a "<" to make the back item.

Update

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 )


type alias UpdateConfig =
{ 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)


type Msg

Opaque type

Setting up


type Model

Opaque type that you will need to add to your model.

type alias Model =
    { menu : SlidingMenu.Model
    , ...
    }

init : Model

init


type MenuItem

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