filmov
tv
jQuery UI Menu Tutorial | Menu Widget in jQuery UI - jQuery UI Tutorial 14
Показать описание
Notes for You:: jQuery UI Menu Widget.
- indicates navigation bars or menus.
Creating Menu Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Menu Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
3. Code the structure of the widget (i.e. HTML or markup):
To create a Menu widget; most of the time unordered lists are used. So we use unordered lists to create Menu widget.
Note: List item’s content must be wrapped within a block level element. But you can observe that, we are wrapping the list item’s content in anchor tag which is an inline level tag; we must convert it to block level tag, that we do using jQuery.
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses:</a>
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call menu jQuery UI function on it
<script type="text/javascript">
$("#menu").menu();
$("#menu a").css({"display":"block","textAlign":"center","textDecoration":"none"});
$("#menu").css({"width":"25%"});
</script>
Complete Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Menu Demo</title>
</head>
<body>
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses:</a>
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
</li>
<li>
<a href="#">About me</a>
</li>
</ul>
<script type="text/javascript">
$("#menu").menu();
$("#menu a").css({"display":"block","textAlign":"center","textDecoration":"none"});
$("#menu").css({"width":"25%"});
</script>
</body>
</html>
Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.
=========================================
Follow the link for next video:
jQuery UI Tutorial 15 - jQuery UI Tooltip Tutorial
Follow the link for previous video:
jQuery UI Tutorial 13 - jQuery UI Selectmenu Tutorial
=========================================
jQuery UI Tutorials Playlist:-
=========================================
Watch My Other Useful Tutorials:-
Bootstrap Tutorials Playlist:-
Dreamweaver Tutorials Playlist:-
PHP Tutorials Playlist:-
=========================================
Subscribe to our YouTube channel:-
Join as Member of our YouTube channel:-
Become our Patron:-
Visit our Website:-
Download our Notes from Instamojo:-
Buy our products on Spring:-
=========================================
Follow us:-
Google My Business:-
Google Blog:-
LinkedIn:-
Facebook:-
Twitter:-
=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial
- indicates navigation bars or menus.
Creating Menu Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Menu Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
3. Code the structure of the widget (i.e. HTML or markup):
To create a Menu widget; most of the time unordered lists are used. So we use unordered lists to create Menu widget.
Note: List item’s content must be wrapped within a block level element. But you can observe that, we are wrapping the list item’s content in anchor tag which is an inline level tag; we must convert it to block level tag, that we do using jQuery.
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses:</a>
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call menu jQuery UI function on it
<script type="text/javascript">
$("#menu").menu();
$("#menu a").css({"display":"block","textAlign":"center","textDecoration":"none"});
$("#menu").css({"width":"25%"});
</script>
Complete Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Menu Demo</title>
</head>
<body>
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Courses:</a>
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
</li>
<li>
<a href="#">About me</a>
</li>
</ul>
<script type="text/javascript">
$("#menu").menu();
$("#menu a").css({"display":"block","textAlign":"center","textDecoration":"none"});
$("#menu").css({"width":"25%"});
</script>
</body>
</html>
Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.
=========================================
Follow the link for next video:
jQuery UI Tutorial 15 - jQuery UI Tooltip Tutorial
Follow the link for previous video:
jQuery UI Tutorial 13 - jQuery UI Selectmenu Tutorial
=========================================
jQuery UI Tutorials Playlist:-
=========================================
Watch My Other Useful Tutorials:-
Bootstrap Tutorials Playlist:-
Dreamweaver Tutorials Playlist:-
PHP Tutorials Playlist:-
=========================================
Subscribe to our YouTube channel:-
Join as Member of our YouTube channel:-
Become our Patron:-
Visit our Website:-
Download our Notes from Instamojo:-
Buy our products on Spring:-
=========================================
Follow us:-
Google My Business:-
Google Blog:-
LinkedIn:-
Facebook:-
Twitter:-
=========================================
Hash Tags:-
#ChidresTechTutorials #jQueryUI #jQueryUITutorial
0:10:59
jQuery UI Menu Tutorial | Menu Widget in jQuery UI - jQuery UI Tutorial 14
0:03:38
jQuery UI Development Tutorial: jQuery UI Menu | packtpub.com
0:05:27
Create a Simple Menu using Jquery UI
0:07:13
5 jQuery UI Menu Widget
0:07:47
How to create a Select Menu Using jquery UI
0:07:55
jQuery UI Selectmenu Tutorial | Selectmenu Widget in jQuery UI - jQuery UI Tutorial 13
0:15:28
Accordion Widget Control in JQuery UI
0:12:50
How to create a Simple Menu Using jquery UI
0:09:37
jQuery UI Tutorial | jQuery UI Tutorial For Beginners | jQuery User Interface Tutorial | Simplilearn
0:12:15
55 - More Widgets & Customizations in jQuery UI | jQuery Tutorials for Beginners | jQuery UI Lib...
0:11:37
jquery menu widget
0:44:42
Create a Flat jQuery UI Combo Box Widget
0:04:57
jQuery UI Development Tutorial: jQuery UI Tabs | packtpub.com
0:09:15
jQuery UI Widgets | jQuery UI Widgets Tutorial - jQuery UI Tutorial 05
0:10:21
Create Tabs Menu using jQuery | Custom Tab Menu in jQuery
0:12:30
JQUERY UI Beginner's Crash Course - #1 Making Side Menus | READ BELOW
0:02:59
jQuery Tutorial for Beginners - 40 - Menu options
1:06:08
jQuery Widget Tutorial | jQuery UI Widgets Tutorial | jQuery Tutorial For Beginners | Simplilearn
0:10:36
jQuery UI Button Tutorial | Button Widget in jQuery UI - jQuery UI Tutorial 18
0:09:11
#48 JQuery UI Including JQuery UI in Project
0:31:02
jQuery Live - 4 | jQuery UI Development Tutorial | jQuery Tutorial | jQuery Training | Edureka
0:05:31
jQuery Tutorial for Beginners - 39 - Vertical menu
0:10:01
jQuery UI Tabs Tutorial | Tabs Widget in jQuery UI - jQuery UI Tutorial 07
0:14:32
How to automate JQueryUI menu using Selenium
Комментарии