CSS3 मेनु जेनरेटर - सजिलै संग आफ्नो वेबसाइट को लागी आश्चर्यजनक मेनुहरु सिर्जना गर्नुहोस्

Menu Options
Fonts

16px

Dropdown Icon
Hover Text Color

Hover Background

CSS Code
#menu {
	background: #0099CC;
	color: #FFF;
	height: 45px;
	padding-left: 18px;
	border-radius: 10px;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #0099CC;
	background: #F2F2F2;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #444444;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #444444;
}
@media screen and (max-width: 800px){
	#menu {position:relative}
	#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:white}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}
HTML Code
<nav id='menu'>
  <input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
  <ul>
    <li><a href='http://'>Home</a></li>
    <li><a class='dropdown-arrow' href='http://'>Products</a>
      <ul class='sub-menus'>
        <li><a href='http://'>Products 1</a></li>
        <li><a href='http://'>Products 2</a></li>
        <li><a href='http://'>Products 3</a></li>
        <li><a href='http://'>Products 4</a></li>
      </ul>
    </li>
    <li><a href='http://'>About</a></li>
    <li><a class='dropdown-arrow' href='http://'>Services</a>
      <ul class='sub-menus'>
        <li><a href='http://'>Services 1</a></li>
        <li><a href='http://'>Services 2</a></li>
        <li><a href='http://'>Services 3</a></li>
      </ul>
    </li>
    <li><a href='http://'>Contact Us</a></li>
  </ul>
</nav>
Javascript Code
function updatemenu() {
  if (document.getElementById('responsive-menu').checked == true) {
    document.getElementById('menu').style.borderBottomRightRadius = '0';
    document.getElementById('menu').style.borderBottomLeftRadius = '0';
  }else{
    document.getElementById('menu').style.borderRadius = '10px';
  }
}

CSS मेनु जेनरेटरको परिचय: सजिलै संग आफ्नो वेबसाइट को लागी आश्चर्यजनक मेनुहरु सिर्जना गर्नुहोस्

मेनुहरूले वेबसाइट नेभिगेसन र प्रयोगकर्ता अनुभवमा महत्त्वपूर्ण भूमिका खेल्छन्। CSS मेनु जेनरेटर एक असाधारण उपकरण हो जसले तपाईंलाई CSS प्रयोग गरेर तपाईंको वेबसाइटको लागि आश्चर्यजनक मेनुहरू सिर्जना गर्न शक्ति दिन्छ। यस लेखमा, हामी CSS मेनु जेनेरेटरको अन्वेषण गर्नेछौं र पत्ता लगाउनेछौं कि यसले तपाईंको वेबसाइटको लागि आकर्षक मेनुहरू डिजाइन गर्ने प्रक्रियालाई कसरी सरल बनाउँछ।

मेनुको महत्त्व बुझ्दै

मेनुहरूले वेबसाइटमा प्राथमिक नेभिगेसन प्रणालीको रूपमा सेवा गर्दछ, प्रयोगकर्ताहरूलाई विभिन्न खण्डहरू र पृष्ठहरूमा मार्गदर्शन गर्दछ। राम्रोसँग डिजाइन गरिएका मेनुहरूले प्रयोगकर्ताको अनुभव बृद्धि गर्दछ, पहुँच सुधार गर्दछ, र आगन्तुकहरूलाई तपाइँको वेबसाइट नेभिगेट गर्न सजिलो बनाउँदछ।

CSS मेनु जेनरेटर प्रस्तुत गर्दै

CSS मेनु जेनरेटर एक प्रयोगकर्ता-अनुकूल अनलाइन उपकरण हो जसले तपाईंलाई आफ्नो वेबसाइटको लागि स्टाइलिश र उत्तरदायी मेनुहरू सिर्जना गर्न अनुमति दिन्छ। CSS मेनु जेनेरेटरको साथ, तपाईले आफ्नो मेनुका विभिन्न पक्षहरूलाई अनुकूलन गर्न सक्नुहुन्छ, जस्तै लेआउट, रंग, फन्ट, एनिमेसन, र थप, व्यापक कोडिङ ज्ञानको आवश्यकता बिना।

CSS मेनु जेनरेटर कसरी प्रयोग गर्ने

CSS मेनु जेनरेटर प्रयोग गर्नु एक हावा हो:

चरण 1: CSS मेनु जेनरेटर वेबसाइटमा जानुहोस्।

चरण २: उपलब्ध मेनु टेम्प्लेटहरूबाट छनौट गर्नुहोस् वा खाली क्यानभासबाट सुरु गर्नुहोस्।

चरण 3: लेआउट, रङ, फन्ट, होभर इफेक्ट र ट्रान्जिसनका लागि सेटिङहरू समायोजन गरेर मेनुको उपस्थिति अनुकूलित गर्नुहोस्। वास्तविक समयमा परिवर्तनहरू पूर्वावलोकन गर्नुहोस्।

चरण 4: एकपटक तपाईं डिजाइनसँग सन्तुष्ट भएपछि, उत्पन्न गरिएको CSS र HTML कोड प्रतिलिपि गर्नुहोस्।

चरण 5: कोडलाई तपाईंको वेबसाइटको HTML फाइल वा CSS स्टाइलसिटमा टाँस्नुहोस्, र तपाईंको मेनु प्रयोगको लागि तयार हुनेछ।

CSS मेनु जेनरेटरका फाइदाहरू

CSS मेनु जेनरेटरले तपाईंको वेबसाइटमा मेनुहरू डिजाइन गर्नका लागि धेरै फाइदाहरू प्रदान गर्दछ:

  • तपाईंको वेबसाइटको शैली र ब्रान्डिङसँग मेल खाने दृश्य आकर्षक मेनुहरू सिर्जना गर्नुहोस्।
  • सहज इन्टरफेस र पूर्व-निर्मित टेम्प्लेटहरूको साथ समय र प्रयास बचत गर्नुहोस्।
  • उत्तरदायी डिजाइनले तपाईंको मेनुहरू विभिन्न यन्त्रहरू र स्क्रिन साइजहरूमा राम्रो देखिन्छ भनी सुनिश्चित गर्दछ।
  • रङ, फन्ट, लेआउट र एनिमेसनहरू सहित अनुकूलन विकल्पहरूको विस्तृत दायरा पहुँच गर्नुहोस्।
  • सफा र अप्टिमाइज गरिएको कोड उत्पन्न गर्नुहोस्, फलस्वरूप छिटो-लोड हुने मेनुहरू।

CSS मेनु जेनरेटर तपाईको वेबसाइटको लागि आश्चर्यजनक मेनुहरू सहज रूपमा डिजाइन गर्नको लागि एक अमूल्य उपकरण हो। तपाइँलाई साधारण नेभिगेसन मेनु वा जटिल ड्रपडाउन मेनु चाहिन्छ, यो उपकरणले प्रक्रियालाई सरल बनाउँछ र तपाइँलाई प्रयोगकर्ता अनुभव बृद्धि गर्ने दृश्य प्रभावशाली मेनुहरू सिर्जना गर्न सशक्त बनाउँछ। CSS मेनु जेनेरेटरको अन्वेषण गर्नुहोस् र तपाईंको वेबसाइटमा नेभिगेसनलाई उच्च पार्ने मनमोहक मेनुहरू सिर्जना गर्न यसको सम्भावना अनलक गर्नुहोस्।