@manikandan_srinivasalu/nav NPM

Welcome to NAV

Designed and Developed with ❤ for the devlopers by MANIKANDAN SRINIVASALU

co-developed by SNEHA.M

NAV tags

! note

don't forget to include CDN links of css and js of the respective nav design
try to include all attributes for respective nav
some nav attributes can handle mutiple values seperated by comma( , ) eg: pages , __styles etc..
if you dont need any customization you can provide empty attributes eg: direction = ""

basic-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/basic-nav/style.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/basic-nav/script.js" defer></script>

A very basic navbar designed with customization

attribute	value
logo	add your brand image
logodim	dimension Height and Width in px
brand	name/title of your brand
brandlink	link to navigate on click
menustyle	barcolor ,fontcolor, hovercolor
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
sticky	navbar sticks to page on scroll if true else sticky=""
transparent	transparent bar that adopts page color
mobileicon	image1,image2 (for open and close)

code sample of basic-nav

<basic-nav
    logo="../nav.jfif" 
    logodim="30px,40px"
    brand="NAV" 
    brandlink="index.html"
    menustyle="crimson,white,black"
    pages="home,about,contact,services,blog"
    links="link1.html,link2.html,link3.html,link4.html,link5.html"
    sticky="true"
    mobileicon="images/hamburger.png,images/exit.png"
>
</basic-nav>

bubble-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/bubblenav/bubblenav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/bubblenav/bubblenav.js" defer></script>

circular menus pops from corner

note !

bubble-nav can handle only upto "4" menu

attribute	value
color	color of the bubbles
hovercolor	color on hover
bubbletext-color	font color
bubbleborder	changes the bordercolor of bubble
font	font family of your choice
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
bubble1-x	the x position of the bubble 1 in px
bubble1-y	the y position of the bubble 1 in px
bubble2-x	the x position of the bubble 2 in px
bubble2-y	the y position of the bubble 2 in px
bubble3-x	the x position of the bubble 3 in px
bubble3-y	the y position of the bubble 3 in px
bubble4-x	the x position of the bubble 4 in px
bubble4-y	the y position of the bubble 4 in px
menucolor	color of the menu button in corner
menutext-color	font color of menu button
menuborder	use css border eg: 2px solid red

code sample of bubble-nav

 <bubble-nav 
    pages="contact,about,product,new" 
    links="contact.html,about.html" 
    color="orange" 
    hovercolor="grey" 
    bubbletext-color="black" 
    bubbleborder="red" 
    font="arial">
</bubble-nav>

float-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/floatnav/floatnav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/floatnav/floatnav.js" defer></script>

float nav is like floating icon button which can hold upto 6 menu

the side of the icon and position can also be changed but not the menus

attribute	value
openicon	image eg:hamburgericon
closeicon	image eg:closeicon
fontstyle	fontcolor, hovercolor
posx,posy	icon position x,y for mobile view
posxpc,posypc	icon position x,y for pc view
menubtnstyle	color,css border property, roundness in (%)
menustyle	color,hovercolor,clickcolor,roundness in (px)
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
right	sticks to rightside if right="true"

code sample of float-nav

   <float-nav
    openicon="images/hamburger.png"
    closeicon="images/exit.png"
    fontstyle="white,black"
    posx="-5px" posy="1px"
    posxpc="-4px" posypc="0px"
    menubtnstyle="lightblue,10px double navy,46%"
    menustyle="navy,powderblue,red,3px"
    pages="Home,About,Contact,Services,Product"
    links="link1.html,link2.html,link3.html,link4.html,link5.html">
  </float-nav>

halfslide-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/halfslidenav/halfslide.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/halfslidenav/halfslide.js" defer></script>

halfslide nav provides the classic website navigation of sliding effect

attribute	value
slideicon	image that opens menu eg:hamburgericon
icon	add your brand image
logodim	dimension Height and Width in (px)
barcolor	color of the navbar
slidecolor	color of the slide
fontstyle	fontcolor, hovercolor
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
right	slides from rightside if right="true"

code sample of halfslide-nav

<halfslide-nav 
    slideicon="images/hamburger.png" 
    icon="../nav.jfif"
    logodim="40px,50px"
    barcolor="#FABC3F"
    slidecolor="grey"
    fontstyle="white,black"
    page="home,about,contact,services,blog" 
    links="link1.html,link2.html,link3.html" 
    right="">
</halfslide-nav>

hover-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/hovernav/hovernav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/hovernav/hovernav.js" defer></script>

hover nav provides the classic website navigation of sliding effect

attribute	value
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
imageicons	icons for your menu(seprate with comma) try to give it as per the order of the pages
menubtncolor	color of the menu button
menubtnborder	css border property
menustyle	menucolor, hovercolor
iconstyle	icon background color, hovercolor
fontstyle	fontcolor, hovercolor
iconborder	css border property
openicon	image eg:hamburgericon

code sample of hover-nav

<hover-nav 
    pages="home,about,contact,services,blog" 
    links="link1.html,link2.html,link3.html" 
    imageicons="images/home.png,images/about.png,images/contact.png,images/service.png,images/blog.png"
    menubtncolor="orange" 
    menubtnborder="10px solid black"
    menustyle="orange,black"
    iconstyle="white,orange"
    fontstyle="black,white"
    iconborder="3px solid black">
</hover-nav>

pop-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/popnav/popnav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/popnav/popnav.js" defer></script>

pop nav is like a popup which can hold upto 6 menu

attribute	value
openicon	image eg:hamburgericon
closeicon	image eg:closeicon
btncolor	color of navbutton
btnborder	css border property
menustyle	bar background color, menucolor, hovercolor, activecolor
fontstyle	fontcolor, hovercolor
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)

code sample of pop-nav

<pop-nav
    openicon="images/hamburger.png" 
    closeicon = "images/exit.png"
    btncolor="wheat" 
    btnborder = "5px solid lightgrey"
    menustyle = "wheat,black,white,"
    fontstyle="white,black"
    pages="home,about,contact,new product" 
    links="link1.html,link2.html,link3.html">
</pop-nav>

simple-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/simplenav/simplenav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/simplenav/simplenav.js" defer></script>

simple nav is general nav with msg feature and icons

attribute	value
msg	message to be displayed on top of the navbar
msgcolor	background color,fontcolor
navbarcolor	bar background color, fontcolor, menuhovercolor, fonthovercolor
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
logo	add your brand image
logodim	dimension Height and Width in (px)
icons	icons for your socialmedia(seprate with comma)
iconlinks	links for the page(url)
iconhovercolor	hovercolor on the icons

code sample of simple-nav

<simple-nav
    msg="nav will be launched soon!"
    msgcolor=",white"
    navbarcolor="green,white,lightgreen,black"
    pages = "Home,Blog,Service,Contact,new,works"
    links ="../index.html,../about.html,link3.html,link4.html"
    logo = "../nav.jfif"
    logodim="30px,40px"
    icons="images/gg.png,images/fb.png,images/ig.png,images/yt.png,images/wt.png"
    iconlinks="https://www.google.com,,link3.html,https://www.youtube.com,link4.html"
    iconhovercolor="lightgreen">
</simple-nav>

slide-nav

CDN link

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/slidenav/slidenav.css">
<script src="https://cdn.jsdelivr.net/gh/MANIKANDANMLT/nav@main/slidenav/slidenav.js" defer></script>

slide nav provides the classic website navigation of sliding effect

attribute	value
logo	add your brand image
logodim	dimension Height and Width in (px)
barcolor	color of the navbar
fontstyle	fontcolor, hovercolor
slidecolor	color of the slide
slideicon	image that opens menu eg:hamburgericon
pages	name of the pages(seprate with comma)
links	links for the page(url or.html or file)
direction	slides from directiontop,bottom,left,right

code sample of slide-nav

  <slide-nav
    logo="../nav.jfif"
    logodim="40px,60px"
    barcolor="purple"
    fontstyle="purple,white"
    slidecolor="violet"
    slideicon="images/hamburger.png"
    page="home,contact,services,blog,new,link,added"
    links="link1.html,link2.html,link3.html,link4.html,link5.html"
    direction="left">
  </slide-nav>

thank you!

new framework navbar nav html tags css js manikandan srinivasalu ui navigation

@manikandan_srinivasalu/nav

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago