1.0.30 • Published 2 years ago
react-llamp-menu v1.0.30
A simple lavalamp menu for React
Easily create a lavalamp style menu
Features
- Adds a modern style to your app/website
- Turn a simple HTML structure (ul/li/button) into a nice lavalamp-style menu
- Respect original structure
- Can be easily customized by adding CSS
Installation
npm i react-llamp-menu
Usage
1 . import
import {LavalampMenu} from 'react-llamp-menu';
2 . Add a menu structure
<LavalampMenu className="optionsMenu">
<ul>
<li><button onClick={()=>console.log('option 1')}>First option</button></li>
<li><button onClick={()=>console.log('option 2')}>Second option</button></li>
<li><button onClick={()=>console.log('option 3')}>Third option</button></li>
</ul>
</LavalampMenu>
3 . customize (example with SCSS)
.optionsMenu {
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
button{
height:45px;
padding:0 20px;
cursor: pointer;
transition: all 0.5s;
&.selected{color:white; font-weight: normal !important;}
}
/*marker*/
.indicator{
background-color:#d92a1c;
border-radius:50px
}
}
- . pre select another different option than the first
<LavalampMenu className="optionsMenu">
<ul>
<li><button onClick={()=>console.log('option 1')}>First option</button></li>
<li><button onClick={()=>console.log('option 2')}>Second option</button></li>
<li><button className="selected" onClick={()=>console.log('option 3')}>Third option</button></li>
</ul>
</LavalampMenu>
Demo
https://react-llamp-menu-demo.netlify.app
License
MIT
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.30
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago