Css horizontal & vertical menus
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css horizontal & vertical menus

on

  • 48 views

 

Statistics

Views

Total Views
48
Views on SlideShare
48
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css horizontal & vertical menus Document Transcript

  • 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 !