All Projects → JonyFang → Animateddropdownmenu

JonyFang / Animateddropdownmenu

Licence: mit
A clean interface dropdown menu, appears underneath navigation bar to display a list of related items when you click on the navigation title.

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Animateddropdownmenu

Jquery.localscroll
Animated anchor navigation made easy with jQuery
Stars: ✭ 624 (+791.43%)
Mutual labels:  navigation, animated
Plasma
An Android Application written using latest Android Jetpack components and best practices, which displays trending movies/TV shows and cast, user can search movies and TV shows and also add them to watchlist.
Stars: ✭ 67 (-4.29%)
Mutual labels:  navigation
Lenav
一个简便的公司内部网址导航站,省去到处找服务地址烦恼......
Stars: ✭ 58 (-17.14%)
Mutual labels:  navigation
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-12.86%)
Mutual labels:  navigation
Airr React
Animated views navigation and more for your Desktop and Mobile ReactJS app
Stars: ✭ 59 (-15.71%)
Mutual labels:  navigation
E Commerce App React Native
E-commerce App UI. React native, Expo managed flow, React navigation v5, Notification.
Stars: ✭ 61 (-12.86%)
Mutual labels:  navigation
Bookmarklet Maker
Tool to create bookmarklet/ javascript apps to automate the web browser.
Stars: ✭ 52 (-25.71%)
Mutual labels:  navigation
Kotlin Pokedex
🌀 A Pokedex app using ViewModel, LiveData, Room and Navigation
Stars: ✭ 1,156 (+1551.43%)
Mutual labels:  navigation
Grid map
Universal grid map library for mobile robotic mapping
Stars: ✭ 1,135 (+1521.43%)
Mutual labels:  navigation
Animatedpencil
Animated Pencil Action view for Android
Stars: ✭ 61 (-12.86%)
Mutual labels:  animated
React Native Learning Resources
Collection of some good resources for react-native ✨ 🔥 💥
Stars: ✭ 61 (-12.86%)
Mutual labels:  navigation
Mogu
一个简约的php书签网址导航
Stars: ✭ 60 (-14.29%)
Mutual labels:  navigation
React Native Hole View
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
Stars: ✭ 61 (-12.86%)
Mutual labels:  animated
React Cube Navigation
3d cube style navigation pattern, like that found in Instagram Stories
Stars: ✭ 59 (-15.71%)
Mutual labels:  navigation
Compass
A Minimal Compass iOS App 🧭
Stars: ✭ 67 (-4.29%)
Mutual labels:  navigation
React Native Animated Numbers
🎰 Library showing animation of number changes in react-native
Stars: ✭ 55 (-21.43%)
Mutual labels:  animated
Jumpmarks
Xcode plugin for numbered bookmarks
Stars: ✭ 60 (-14.29%)
Mutual labels:  navigation
Re Navigate
Example of React Native Navigation with re-frame/re-natal
Stars: ✭ 61 (-12.86%)
Mutual labels:  navigation
Corenavigation
📱📲 Navigate between view controllers with ease. 💫 🔜 More stable version (written in Swift 5) coming soon.
Stars: ✭ 69 (-1.43%)
Mutual labels:  navigation
Genesis Header Nav
WordPress plugin that registers a menu location and displays it inside the header for a Genesis Framework child theme.
Stars: ✭ 67 (-4.29%)
Mutual labels:  navigation

AnimatedDropdownMenu

AnimatedDropdownMenu is a clean interface dropdown menu, appears underneath navigation bar to display a list of related items when you click on the navigation title.

Type 01 Type 02 Type 03
Type 04 Type 05 Type 06
Type 07 Type 08 Type 09

Requirements

  • Xcode 8.0+
  • iOS 8.0+
  • Swift 3.0

Example

To run the example project, clone the repo, and start Examples in Xcode.

$ git clone https://github.com/JonyFang/AnimatedDropdownMenu
$ cd AnimatedDropdownMenu/Examples
$ open Examples.xcworkspace

Installation

CocoaPods

To integrate AnimatedDropdownMenu into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'AnimatedDropdownMenu'

Usage

Get Started

Import the library where you want to use it.

import AnimatedDropdownMenu

class ExampleViewController: UIViewController {
    // MARK: - Properties
    fileprivate var selectedStageIndex: Int = 0
    fileprivate let dropdownItems: [AnimatedDropdownMenu.Item] = [
        AnimatedDropdownMenu.Item.init("EXPLORE", nil, nil),
        AnimatedDropdownMenu.Item.init("POPULAR", nil, nil),
        AnimatedDropdownMenu.Item.init("RECENT", nil, nil)
    ]

    // MARK: Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let dropdownMenu = AnimatedDropdownMenu(navigationController: navigationController, containerView: view, selectedIndex: selectedStageIndex, items: dropdownItems)
        dropdownMenu.didSelectItemAtIndexHandler = {
            [weak self] selectedIndex in
            guard let strongSelf = self else {
                return
            }
            strongSelf.selectedStageIndex = selectedIndex
            //Configure Selected Action
        }

        navigationItem.titleView = dropdownMenu
    }
}

Customization

Once you have setup the dropdown menu, you can custom the interface of menu. You can override these properties for your favor:

  • menuTitleColor: The font of the navigation bar title. Default is UIFont.systemFont(ofSize: 16.0)
  • menuArrowTintColor: The tint color of the arrow. Default is .darkGray
  • cellBackgroundColor: The color of the cell background. Default is RGBA(216, 85, 96, 1)
  • cellSelectedColor: The color of the cell when the cell is selected. Default is .clear
  • cellSeparatorColor: The color of the cell separator. Default is RGBA(255, 255, 255, 0.3)
  • cellTextColor: The color of the text inside cell. Default is RGBA(255, 255, 255, 0.3)
  • cellTextSelectedColor: The color of the text inside cell when the cell is selected. Default is .white
  • cellTextAlignment: The alignment of the text inside cell. Default is .center

Author

Contributing

Please open a new Issue here if you run into a problem specific to AnimatedDropdownMenu, have a feature request, or want to share a comment.

License

AnimatedDropdownMenu is available under the MIT license. See the LICENSE file for more info.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].