1.2.3 • Published 4 years ago
lax-nav v1.2.3
Lax-Nav - Work In Progress!!!
Contents include:
- Simple mobile first navigation bar
- Customize color scheme easily under style/scss/colors.scss
- Customize any css/scss scripts under style/
To change color scheme, under scss/colors: Change scss variables listed below:
$hover:rgba(17, 83, 158, 0.9);
$light: rgba(231, 225, 231, 1);
$dark: rgba(0,0,0,0.9);
@mixin background{ background-color: $dark; }
@mixin color { color: $light ;}
@mixin hover { background-color: $hover; color: $light; }
@mixin menu {
border-bottom: 3px solid $light;
transition: background-color 0.6s ease;
}An example is listed under ./src/example for referencing. Contents are meant to replace other CSS frameworks navigation bars. with my own.
<link rel="stylesheet" href="../style/css/lax-nav.css">
<script src="https://kit.fontawesome.com/d4eee43cda.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="lax">
<div class="lax-nav" id="mynavigation">
<a href="#home" class="active is-blue">Home</a>
<a href="#news">About</a>
<a href="#contact">News</a>
<div class="dropdown">
<button class="drop-button">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="lax_nav()">
<i class="fas fa-bars" id="icon-bar"></i>
</a>
</div>
</div>
<script src="../scripts/lax_nav.js"></script>
</body>Navigation bar is intended to be paired alongside other CSS frameworks such as Bulma, Bootstrap or Semantic UI
CSS Frameworks
- Bulma https://bulma.io/
npm install bulma - Bootstrap https://getbootstrap.com/
npm install bootstrap - Semantic UI https://semantic-ui.com/
npm install semantic-ui --save cd semantic/ gulp build
Created by Quelchlax
Contents are inspired from sources such as Bulma, Bootstrap and Semantic UI
All code was done by myself, some resources and references include W3Schools, Bootstrap, Bulma and Semantic UI and Traversy Media.