just copy this CDN link to your <head> tag!
<script src="https://cdn.jsdelivr.net/gh/The-DevNinja/navColor.js/script.min.js" defer></script>if you want to put it inside
<head>add adeferattribute to the<script>tag
otherway, you need to put the script before calling the function, for not getting bugs :)
| YouTube Video Tutorial | Online Website |
|---|---|
| https://youtu.be/KxA1_yTOFHw | https://navcolorjs.vercel.app/ |
- navColor.js
you need to add this function to your <script> tag, or in your .js javascript file.
the function is createNav();
- the first parameter is a array of objects
- the second parameter is not necessary, but is only needed for more custum navbar functionality.
the syntax will look like this:
createNav([{...}, {...}, {...}], options);the object need 3 parameters:
the order of parameters not affect the functionality)
something like this:
{
iconName: "fa-user",
// other parameters
}this project under the hood uses fontawesome icons library.
so you need to write a string containing the class of that icon.
the color need to be a string containing one of the following values:
hex, for example:#00FFFF(remember to add#)- or a
rgb(), for example:rgb(0,0, 255) - or normal color value for example:
cyan - or any other valid css color value (but in string format)
something like this:
{
color: "cyan",
// other parameters
}this is the text that will be displayed onclick of a icon.
also this need to be a string
something like this:
{
text: "hello world!",
// other parameters
}this is a example containing 3 objects in array, without any options.
createNav([{ // first
"text": "homepage page",
"iconName": "fa-building",
"color": "red"
}, // second
{ "text": "see your files",
"iconName": "fa-file-code",
"color": "blue"
}, // third
{ "text": "your profile",
"iconName": "fa-user",
"color": "yellow"
}]
);if you don't like writing directly the array, then do like this:
const myArray = [
{
"text": "homepage page",
"iconName": "fa-building",
"color": "red"
},
{
"text": "see your files",
"iconName": "fa-file-code",
"color": "blue"
},
{
"text": "your profile",
"iconName": "fa-user",
"color": "yellow"
}
];
createNav(myArray); // this is also working fine!the options aren't important to add, use them only when you need more custum behaviurs.
if you have any ideas of a new feature to add,
you add a suggestion in the "issue" tab in this github repo. thank a lot.
you need to write this, with a string containing your choosed class,
make sure that there is # before the name of the id
{
navElement: "#myId",
// other parameters
}
// output: <nav id="myId">...</nav>I suggest this solution than the class solution, because a ID can be added only one time, so is unique.
you need to write this, with a string containing your choosed class,
make sure that there is . before the name of the class
{
navElement: ".myClass",
// other parameters
}
// output: <nav class="myClass">...</nav>this need a boolean value like false or true
by default is setted to false.
{
isHtmlOnly: true,
// other parameters
}this make you only install the script for creating html tags,
and the CSS variables, will continue to working!
and my CSS won't be installed.
instead if you want most parts of my CSS, but not all,
you can modify only the parts you want with your css file and adding!importantif it didn't work (make sure to use also devtools).
| name of class | description |
|---|---|
.icon-div |
the parent-div that will contain the <i> tag of the icon fontawesome |
.icon-div.active |
you can use this selector for adding some effect after the click of a icon |
.icon |
is the <i> tag itself, which will be the icon itself |
| name of class | description |
|---|---|
--bg |
you can use this css variable in your css code to color correctly and dinamically anything by using var(--bg); |
[data-text] |
this isn't a css variables but still helpful, you can use this data-text html attribute in your pseudo-elements (::before, ::after, etc...) with the attr(data-text) css function |