More than Just Lines on a Map: Best Practices for U.S Bike Routes
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>
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 !
