SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
CSS Horizontal Menus
Posted by: Abdul Wali in CSS, Web Designing 6 Comments
As I earlier published a number of CSS tutorials for blogs, websites and separate web
pages. But the world of web designing is still to be discovered We will further work
with CSS in details in coming days. I have another Advance CSS course in Urdu that
contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will
discuss the rounded border properties, newly added shadow effect, mouse effects,
transitions and so many more. But Today, I will share some beautiful CSS horizontal
menus that are entirely built within CSS and HTML. These menus are awesome and
can be included in both websites and blogs. You can add them into yourblogger
blogs too. Below is the list of menus along with CSS and HTML codes. Just love
them.
How to Add CSS menus to blog?
These menus can be included into any kind of website or blog. If you’re
using blogger platform for blogging then simply copy the codes from below boxes
and paste it inside anHTML/JavaScript widget and save that widget. You can drag
the widget anywhere you want to show the menu on your blog; mostly people keep
it below the header.
Now here is the list of menus I’m going to share, the codes are in block quote for
each menu, so you can use them for websites and blogs. The customization will be
taught below the codes.
CSS Menu # 1 Code:
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul {
margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left;
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.
png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block;
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabri
ghtE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-
Mac */ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-
position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id=”tabsE”> <ul><li><a
href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link
3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a
href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 2 Code:
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid
#F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline;
margin:0; padding:0; } #tabs9 a { float:left;
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.pn
g) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block;
background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabrig
ht9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-
Mac */ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-
position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0%
-42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id=”tabs9″> <ul><li><a
href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link
3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a
href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 3 Code:
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-
height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0;
padding:0; } #tabs5 a { float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-
pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-
decoration:none; } #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-
ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px;
color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs5 a span {float:none;} /* End IE5-Mac hack */
#tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-
position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-
position:100% -42px; } </style> <div id=”tabs5″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a
href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link
4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a
href=”#”><span>Link 7</span></a></li></ul></div>
CSS Menu # 4 Code:
#menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent
url(‘http://4.bp.blogspot.com/-XbXPrOFFvIU/UIhe9RCprAI/AAAAAAAAfBQ/kIWnxzH_3eo/s1600/tabright9.gif’)
repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123
ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;}
#menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
#menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(‘http://3.bp.blogspot.com/-
C2MK69BqpVY/UIhe8n7RVqI/AAAAAAAAfBI/HAmuRlm-bZg/s1600/tableft9.gif’) no-repeat top center;} <div
id=”menu123″> <ul><li><a href=”#” title=”css menus”>Home</a></li><li><a href=”#” title=”css menus”>About
Us</a></li><li><a href=”#” title=”css menus”>Services</a></li><li><a href=”#” title=”css menus”>Our
Work</a></li><li><a href=”#” title=”css menus”>Contact Us</a></li></ul></div>
CSS Menu # 4 Code:
#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent
url(‘http://3.bp.blogspot.com/-dU9X1FKfRsU/UIhh8AN_YuI/AAAAAAAAfBs/A8TmSnuq2Mo/s1600/bgOFF1.gif’)
repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555
ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li
a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent
url(‘http://3.bp.blogspot.com/-fxbQMlgtnGc/UIhh7Hg3WVI/AAAAAAAAfBo/0O6ZM7279xM/s1600/bgDIVIDER1.gif’)
no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff
url(‘http://4.bp.blogspot.com/-451FSWiDSbA/UIb91ENcDnI/AAAAAAAAe-Y/FS3vS_3_QRw/s1600/bgON1.gif’) no-
repeat top right;} <div id=”menu555″> <ul><li><a href=”#” title=”"><span>Home</span></a></li><li><a href=”#”
title=”"><span>About Us</span></a></li><li><a href=”#” title=”"><span>Services</span></a></li><li><a href=”#”
title=”"><span>Our Work</span></a></li><li><a href=”#” title=”"><span>Contact Us</span></a></li></ul></div>
Customization
Now when you liked any menu from the above list, copy the code from the box and
paste it inside an HTML/JavaScript widget in Blogger and then drag that widget
right below the header; see the example image below:
I added one of the above menus into an HTML/JavaScript widget and dragged that
below the header as showing in above image and that menu is looking like below
image on my blog:
Now if you want to replace your links and anchor texts with the default ones then
simply find lines like below one in the above code:
<ul><li><a href=”#”><span>About Us</span></a></li></ul>
All the li tags are within ul tag, and the <a href=”#”> is the link; so you can replace
the (#) sign with your link and the default text (About Us, Services, Our Work etc)
with your anchor text.
Your Turn:
These were some horizontal CSS menus for blogger and other websites, if you’ve
questions or facing difficulties while adding them to your blog then do ask me in
comment section. We will also share more collection of Vertical CSS menus and CSS
drop down menus very soon. Stay connected with us.
CSS cool Vertical Menus
Posted by: Abdul Wali in CSS, Web Designing 3 Comments
Today, I would like to share CSS vertical menus collection with you. As you might
know, CSS menus look great in a website. There are many benefits of using menus in
a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to
click on the links inside the menu and the second benefit is: the menus are faster in
loading, they don’t take much time to load in all browsers, Because with css you
make the menus more readable for the browser. The css codes are just called in
HTML page by a class or an ID selector. So, within just one word you can call them
to be appeared on your blog. We will keep sharing CSS menus with you because
there are thousands of stylish menus are there with different looks. We will also
share a collection of drop down menus with you in our coming posts.
How to add CSS vertical menus to blog or
website?
The procedure of adding any css menu to your blogger blog or website is quite
simple and can be done within few steps. The menus we are sharing today are
created with CSS and HTML. You can copy the entire code from the text box below
in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and
paste the code inside that. Save the widget and view your blog to see the new added
menu.
Remember:
These menus are vertical menus, therefore, they are mostly used in sidebar of your
blog. Make sure you add them in sidebar for better result. The codes are with
example pictures can be found below. Customization will be taught below the menu
codes.
CSS vertical Menu # 1
<style>#menu1 { width: 200px; margin: 10px; } #menu1 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height:
22px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #666; display: block; background:
url(‘http://4.bp.blogspot.com/-g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’);
padding: 10px 0 0 35px; } #menu1 li a:hover { color: #000; background: url(‘http://4.bp.blogspot.com/-
g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’) 0 -32px; padding: 10px 0 0 35px; }
#menu1 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu1″>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>
</div>
CSS vertical Menu # 2
#menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height: 24px;
text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #FFF; display: block; background:
url(‘http://3.bp.blogspot.com/-X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’);
padding: 8px 0 0 10px; } #menu2 li a:hover { color: #FFF; background: url(‘http://3.bp.blogspot.com/-
X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’) 0 -32px; padding: 8px 0 0 10px; }
#menu2 ul { list-style: none; margin: 0; padding: 0; } <div id=”menu2″>
<ul>
<li><a href=”#1″ title=”Link 1″>Link 1</a></li>
<li><a href=”#2″ title=”Link 2″>Link 2</a></li>
<li><a href=”#3″ title=”Link 3″>Link 3</a></li>
<li><a href=”#4″ title=”Link 4″>Link 4</a></li>
<li><a href=”#5″ title=”Link 5″>Link 5</a></li>
</ul>
</div>
CSS vertical Menu # 3
<style>#menu3 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width:
1px; margin: 10px; } #menu3 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height: 24px; text-decoration:
none; } #menu3 li a:link, #menu3 li a:visited { color: #5E7830; display: block; background: url(‘http://4.bp.blogspot.com/-
tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’); padding: 8px 0 0 10px; } #menu3 li
a:hover { color: #26370A; background: url(‘http://4.bp.blogspot.com/-
tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’) 0 -32px; padding: 8px 0 0 10px; }
#menu3 li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } #menu3 ul { list-
style: none; margin: 0; padding: 0; } </style><div id=”menu3″>
<ul>
<li><a href=”#1″ title=”Home”>Home</a></li>
<li><a href=”#2″ title=”About”>About</a></li>
<li><a href=”#3″ title=”Services”>Services</a></li>
<li><a href=”#4″ title=”Portfolio”>Portfolio</a></li>
<li><a href=”#5″ title=”Store”>Store</a></li>
<li><a href=”#6″ title=”Download”>Download Menu</a></li>
</ul>
</div>
CSS vertical Menu #4
<style>#menu4 { width: 200px; margin-top: 10px; } #menu4 li a { text-decoration: none; height: 32px; voice-family: “”}”";
voice-family: inherit; height: 24px; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background:
url(‘http://3.bp.blogspot.com/-SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’); padding:
8px 0 0 20px; } #menu4 li a:hover { color: #257EB7; background: url(‘http://3.bp.blogspot.com/-
SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -32px; padding: 8px 0 0 25px; } #menu4
li a:active { color: #fff; background: url(‘http://3.bp.blogspot.com/-
SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -64px; padding: 8px 0 0 25px; } #menu4
ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu4″>
<ul>
<li><a href=”#1″>Home</a></li>
<li><a href=”#2″>About</a></li>
<li><a href=”#3″>Services</a></li>
<li><a href=”#4″>Portfolio</a></li>
<li><a href=”#5″>Store</a></li>
<li><a href=”#6″>Download Menu</a></li>
</ul>
</div>
Customization:
After adding the code into an HTML/JavaScript in blogger you can customize the
menu by yourself; for changing the links and anchor texts to your own just find
below piece of code in the menu:
<ul><li><a href=”#”>About</a></li></ul>
All the links are inside the ul tag, so replace each (#) sign with your link and the text
i.e About, Home, Services etc with your own anchor text. Save the widget and check
the result by viewing your blog. All the CSS properties and values can also be
customized according to your needs. You can add these menus to any website as
well.
Note: The images which have been used in these menus are saved in my Picasa
photo album, so you don’t need to do any extra work. Just use them and enjoy!
Share !

Más contenido relacionado

Último

Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashasashalaycock03
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceApostolos Syropoulos
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...M56BOOKSTORE PRODUCT/SERVICE
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxvidhisharma994099
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 

Último (20)

Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
Work Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sashaWork Experience for psp3 portfolio sasha
Work Experience for psp3 portfolio sasha
 
A gentle introduction to Artificial Intelligence
A gentle introduction to Artificial IntelligenceA gentle introduction to Artificial Intelligence
A gentle introduction to Artificial Intelligence
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....Riddhi Kevadiya. WILLIAM SHAKESPEARE....
Riddhi Kevadiya. WILLIAM SHAKESPEARE....
 
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
 
Protein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptxProtein Structure - threading Protein modelling pptx
Protein Structure - threading Protein modelling pptx
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic SupportMarch 2024 Directors Meeting, Division of Student Affairs and Academic Support
March 2024 Directors Meeting, Division of Student Affairs and Academic Support
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 

Css horizontal & vertical menus

  • 1. CSS Horizontal Menus Posted by: Abdul Wali in CSS, Web Designing 6 Comments As I earlier published a number of CSS tutorials for blogs, websites and separate web pages. But the world of web designing is still to be discovered We will further work with CSS in details in coming days. I have another Advance CSS course in Urdu that contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will discuss the rounded border properties, newly added shadow effect, mouse effects, transitions and so many more. But Today, I will share some beautiful CSS horizontal menus that are entirely built within CSS and HTML. These menus are awesome and can be included in both websites and blogs. You can add them into yourblogger blogs too. Below is the list of menus along with CSS and HTML codes. Just love them. How to Add CSS menus to blog? These menus can be included into any kind of website or blog. If you’re using blogger platform for blogging then simply copy the codes from below boxes and paste it inside anHTML/JavaScript widget and save that widget. You can drag the widget anywhere you want to show the menu on your blog; mostly people keep it below the header. Now here is the list of menus I’m going to share, the codes are in block quote for each menu, so you can use them for websites and blogs. The customization will be taught below the codes. CSS Menu # 1 Code: <style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE. png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabri ghtE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5- Mac */ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background- position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id=”tabsE”> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div> CSS Menu # 2 Code:
  • 2. <style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.pn g) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabrig ht9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5- Mac */ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background- position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id=”tabs9″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div> CSS Menu # 3 Code: <style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line- height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu- pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text- decoration:none; } #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu- ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background- position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background- position:100% -42px; } </style> <div id=”tabs5″> <ul><li><a href=”#”><span>Link 1</span></a></li><li><a href=”#”><span>Link 2</span></a></li><li><a href=”#”><span>Link 3</span></a></li><li><a href=”#”><span>Link 4</span></a></li><li><a href=”#”><span>Link 5</span></a></li><li><a href=”#”><span>Link 6</span></a></li><li><a href=”#”><span>Link 7</span></a></li></ul></div> CSS Menu # 4 Code: #menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(‘http://4.bp.blogspot.com/-XbXPrOFFvIU/UIhe9RCprAI/AAAAAAAAfBQ/kIWnxzH_3eo/s1600/tabright9.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123 ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;} #menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(‘http://3.bp.blogspot.com/- C2MK69BqpVY/UIhe8n7RVqI/AAAAAAAAfBI/HAmuRlm-bZg/s1600/tableft9.gif’) no-repeat top center;} <div id=”menu123″> <ul><li><a href=”#” title=”css menus”>Home</a></li><li><a href=”#” title=”css menus”>About
  • 3. Us</a></li><li><a href=”#” title=”css menus”>Services</a></li><li><a href=”#” title=”css menus”>Our Work</a></li><li><a href=”#” title=”css menus”>Contact Us</a></li></ul></div> CSS Menu # 4 Code: #menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(‘http://3.bp.blogspot.com/-dU9X1FKfRsU/UIhh8AN_YuI/AAAAAAAAfBs/A8TmSnuq2Mo/s1600/bgOFF1.gif’) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555 ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(‘http://3.bp.blogspot.com/-fxbQMlgtnGc/UIhh7Hg3WVI/AAAAAAAAfBo/0O6ZM7279xM/s1600/bgDIVIDER1.gif’) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(‘http://4.bp.blogspot.com/-451FSWiDSbA/UIb91ENcDnI/AAAAAAAAe-Y/FS3vS_3_QRw/s1600/bgON1.gif’) no- repeat top right;} <div id=”menu555″> <ul><li><a href=”#” title=”"><span>Home</span></a></li><li><a href=”#” title=”"><span>About Us</span></a></li><li><a href=”#” title=”"><span>Services</span></a></li><li><a href=”#” title=”"><span>Our Work</span></a></li><li><a href=”#” title=”"><span>Contact Us</span></a></li></ul></div> Customization Now when you liked any menu from the above list, copy the code from the box and paste it inside an HTML/JavaScript widget in Blogger and then drag that widget right below the header; see the example image below: I added one of the above menus into an HTML/JavaScript widget and dragged that below the header as showing in above image and that menu is looking like below image on my blog: Now if you want to replace your links and anchor texts with the default ones then simply find lines like below one in the above code: <ul><li><a href=”#”><span>About Us</span></a></li></ul> All the li tags are within ul tag, and the <a href=”#”> is the link; so you can replace the (#) sign with your link and the default text (About Us, Services, Our Work etc) with your anchor text. Your Turn: These were some horizontal CSS menus for blogger and other websites, if you’ve questions or facing difficulties while adding them to your blog then do ask me in comment section. We will also share more collection of Vertical CSS menus and CSS drop down menus very soon. Stay connected with us.
  • 4. CSS cool Vertical Menus Posted by: Abdul Wali in CSS, Web Designing 3 Comments Today, I would like to share CSS vertical menus collection with you. As you might know, CSS menus look great in a website. There are many benefits of using menus in a blog or website; the first benefit of using a CSS menu is: it attracts the visitors to click on the links inside the menu and the second benefit is: the menus are faster in loading, they don’t take much time to load in all browsers, Because with css you make the menus more readable for the browser. The css codes are just called in HTML page by a class or an ID selector. So, within just one word you can call them to be appeared on your blog. We will keep sharing CSS menus with you because there are thousands of stylish menus are there with different looks. We will also share a collection of drop down menus with you in our coming posts. How to add CSS vertical menus to blog or website? The procedure of adding any css menu to your blogger blog or website is quite simple and can be done within few steps. The menus we are sharing today are created with CSS and HTML. You can copy the entire code from the text box below in the list. And then go to your Blogger dashboard >> Layout >> Add a Gadget and paste the code inside that. Save the widget and view your blog to see the new added menu. Remember: These menus are vertical menus, therefore, they are mostly used in sidebar of your blog. Make sure you add them in sidebar for better result. The codes are with example pictures can be found below. Customization will be taught below the menu codes. CSS vertical Menu # 1 <style>#menu1 { width: 200px; margin: 10px; } #menu1 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height: 22px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #666; display: block; background: url(‘http://4.bp.blogspot.com/-g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’); padding: 10px 0 0 35px; } #menu1 li a:hover { color: #000; background: url(‘http://4.bp.blogspot.com/- g7cGankjXio/UImaDWbk3hI/AAAAAAAAfHs/odOOAehEuNI/s1600/menu-1.gif’) 0 -32px; padding: 10px 0 0 35px; } #menu1 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu1″> <ul> <li><a href=”#”>Link 1</a></li> <li><a href=”#”>Link 2</a></li> <li><a href=”#”>Link 3</a></li> <li><a href=”#”>Link 4</a></li> <li><a href=”#”>Link 5</a></li>
  • 5. </ul> </div> CSS vertical Menu # 2 #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #FFF; display: block; background: url(‘http://3.bp.blogspot.com/-X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #FFF; background: url(‘http://3.bp.blogspot.com/- X1T8GWy0Ayc/UIme4WwPHMI/AAAAAAAAfIo/0PTynvx96NE/s1600/menu-2.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu2 ul { list-style: none; margin: 0; padding: 0; } <div id=”menu2″> <ul> <li><a href=”#1″ title=”Link 1″>Link 1</a></li> <li><a href=”#2″ title=”Link 2″>Link 2</a></li> <li><a href=”#3″ title=”Link 3″>Link 3</a></li> <li><a href=”#4″ title=”Link 4″>Link 4</a></li> <li><a href=”#5″ title=”Link 5″>Link 5</a></li> </ul> </div> CSS vertical Menu # 3 <style>#menu3 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu3 li a { height: 32px; voice-family: “”}”"; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #5E7830; display: block; background: url(‘http://4.bp.blogspot.com/- tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #26370A; background: url(‘http://4.bp.blogspot.com/- tor2hEbAJXI/UImgQRCNuoI/AAAAAAAAfIw/dj1gRx9BwvQ/s1600/menu-3.gif’) 0 -32px; padding: 8px 0 0 10px; } #menu3 li a:active { color: #26370A; background: url(images/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } #menu3 ul { list- style: none; margin: 0; padding: 0; } </style><div id=”menu3″> <ul> <li><a href=”#1″ title=”Home”>Home</a></li> <li><a href=”#2″ title=”About”>About</a></li> <li><a href=”#3″ title=”Services”>Services</a></li> <li><a href=”#4″ title=”Portfolio”>Portfolio</a></li> <li><a href=”#5″ title=”Store”>Store</a></li>
  • 6. <li><a href=”#6″ title=”Download”>Download Menu</a></li> </ul> </div> CSS vertical Menu #4 <style>#menu4 { width: 200px; margin-top: 10px; } #menu4 li a { text-decoration: none; height: 32px; voice-family: “”}”"; voice-family: inherit; height: 24px; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(‘http://3.bp.blogspot.com/-SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’); padding: 8px 0 0 20px; } #menu4 li a:hover { color: #257EB7; background: url(‘http://3.bp.blogspot.com/- SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -32px; padding: 8px 0 0 25px; } #menu4 li a:active { color: #fff; background: url(‘http://3.bp.blogspot.com/- SfexCApvtJw/UImhJNyhCvI/AAAAAAAAfI4/FtwBi8s6br0/s1600/menu-4.gif’) 0 -64px; padding: 8px 0 0 25px; } #menu4 ul { list-style: none; margin: 0; padding: 0; } </style><div id=”menu4″> <ul> <li><a href=”#1″>Home</a></li> <li><a href=”#2″>About</a></li> <li><a href=”#3″>Services</a></li> <li><a href=”#4″>Portfolio</a></li> <li><a href=”#5″>Store</a></li> <li><a href=”#6″>Download Menu</a></li> </ul> </div> Customization: After adding the code into an HTML/JavaScript in blogger you can customize the menu by yourself; for changing the links and anchor texts to your own just find below piece of code in the menu: <ul><li><a href=”#”>About</a></li></ul> All the links are inside the ul tag, so replace each (#) sign with your link and the text i.e About, Home, Services etc with your own anchor text. Save the widget and check the result by viewing your blog. All the CSS properties and values can also be customized according to your needs. You can add these menus to any website as well. Note: The images which have been used in these menus are saved in my Picasa photo album, so you don’t need to do any extra work. Just use them and enjoy! Share !