www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Menu Button

Hybrid View

  1. #1
    Join Date
    Feb 2011
    Posts
    177

    Question CSS Menu Button

    I have been playing around with this tutorial: http://osvaldas.info/examples/drop-d...nd-responsive/

    However I want to make it three lines when it switches over over to the small scree navigation. I have played around but so far no luck any suggestions?

    Here is my CSS:


    Code:
    @charset "iso-8859-1";
    /* CSS Document */
    a,
    a:hover
    {
    color: #111;
    }
    a
    {
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
    }
    a,
    a:hover
    {
    	text-decoration: none;
    }
    #nav
    
    {
    	width: 60em; /* 1000 */
    vertical-online;: top;
    z-index: 5000;
    }
    #nav > a
    {
    display: none;
    }
    #nav li
    {
    	position: relative;
    	list-style-type: none;
    	z-index: 5000;
    }
    #nav li a
    {
    color: #fff;
    display: block;
    }
    #nav li a:active
    {
    	background-color: #E7AC5C !important;
    }
    #nav span:after
    {
    	width: 0;
    	height: 0;
    	border: 0.313em solid transparent; /* 5 */
    	border-bottom: none;
    	border-top-color: #E7AC5C;
    	content: '';
    	vertical-align:top;;
    	display: inline-block;
    	position: relative;
    	right: -0.313em; /* 5 */
    }
    /* first level */
    #nav > ul
    {
    	height: 3.75em; /* 60 */
    	background-color: #ABBC6B;
    	list-style-type: none;
    	z-index: 5000;
    }
    #nav > ul > li
    {
    width: 25%;
    height: 100%;
    float: left;
    z-index: 5000;
    }
    #nav > ul > li > a
    {
    height: 100%;
    font-size: 1.5em; /* 24 */
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
    }
    #nav > ul > li:not( :last-child ) > a
    {
    
    }
    #nav > ul > li:hover > a,
    #nav > ul:not( :hover ) > li.active > a
    {
    	background-color: #E7AC5C;
    }
    /* second level */
    #nav li ul
    {
    	background-color: #ABBC6B;
    	display: none;
    	position: absolute;
    	top: 100%;
    }
    #nav li:hover ul
    {
    display: block;
    left: 0;
    right: 0;
    }
    #nav li:not( :first-child ):hover ul
    {
    left: -1px;
    }
    #nav li ul a
    {
    	font-size: 1.25em;
    	padding: .75em; /* 15 (20) */
    }
    #nav li ul li a:hover,
    #nav li ul:not( :hover ) li.active a
    {
    	background-color: #E7AC5C;
    }
    @media only screen and ( max-width: 62.5em ) /* 1000 */
    {
    #nav
    {
    width: 100%;
    position: static;
    margin: 0;
    z-index: 5000;
    }
    }
    @media only screen and ( max-width: 40em ) /* 640 */
    {
    html
    {
    font-size: 14em%; /* 12 */
    }
    #nav
    {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    z-index:5000;
    }
    #nav > a
    {
    	width: 3.125em; /* 50 */
    	height: 3.125em; /* 50 */
    	text-align: left;
    	text-indent: -9999px;
    	background-color: #ABBC6B;
    	position: relative;
    	z-index: 5000;
    }
    #nav > a:before,
    #nav > a:after                                    
    ------- This is where I think you would add a double line or something to make it have the three --------- {
    position: absolute; border: 1px solid #fff; top: 18%; left: 18%; right: 18%; content: ''; z-index: 5000;
    } #nav > a:after { top: 60%; } #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; } /* first level */ #nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; z-index: 5000; } #nav:target > ul { display: block; z-index: 5000; } #nav > ul > li { width: 100%; float: none; z-index: 5000; } #nav > ul > li > a { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */ } #nav > ul > li:not( :last-child ) > a { } /* second level */ #nav li ul { position: static; padding: 1.25em; /* 20 */ padding-top: 0; z-index: 5000; } } $( '#nav li:has(ul)' ).doubleTapToGo(); .no-touch #nav li:hover ul {display: block;}

    Thank you for any and all suggestions.

  2. #2
    Join Date
    May 2013
    Location
    Surendranagar Gujarat India
    Posts
    55
    Features of the CSS Navigation Menu Bar Buttons

    Rollover or MouseOver Effects — When you move your mouse over a button, it changes colour.

    Fully CSS-Driven - No JavaScript Needed — The menu is fully CSS driven — it does not depend on JavaScript or any other web scripting language. Even if your visitors disable JavaScript, your menu will be fully functional in Internet Explorer 6 and above, Opera, Firefox and Safari.

    No Images Needed — The button menu generated by this wizard does not depend on any images to give its button and mouseover effects. You do not need to draw a new image every time you want to add a new button or menu item. All its effects are accomplished using Cascading Style Sheets (CSS) which is built into every modern web browser.

    Both Vertical Menu Bars (for the Side Bar) and Horizontal Menu Bars (Tab Bars) Supported — Whether you want your menu bar buttons to be lined up along one column of your website, such as in your sidebar, or you want it horizontal at the top (tabs) or bottom of your web page, the CSS Navigation Menu Button Wizard can generate the code for you.

    Fully Customizable — You can fully customize your menu buttons to suit the decor of your website. For example, you can change the colour of your menu buttons (in both its normal state and its rollover state), the text appearing on those buttons as well as the URLs (pages) that they point to. The links can be both internal, to pages within your site, or external, to another site.

    Plug and Play — All the code necessary for the navigation menu buttons to work is generated for you. Just plug it into your website and you're done.

    Easy to Create — No mucking around with the raw CSS or HTML code is necessary. The wizard does all the work for you. Just enter the information you want for your menu in this 2-step wizard to get your menu button code.

    Free — Create the buttons and place them on your website free of charge! There are no fees whatsoever.

    No Advertisements — There are no advertisements in the CSS buttons generated by the CSS Navigation Menu Button Wizard.

    Terms of Use

    You may use the code generated by this wizard on your website, free of charge.
    THIS SERVICE, THE INFORMATION SUPPLIED AND THE CODE GENERATED ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, NOT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. YOU AGREE TO BEAR ALL RISKS AND LIABILITIES ARISING FROM THE USE OF THIS SERVICE, THE INFORMATION SUPPLIED AND THE CODE GENERATED BY IT.
    If you cannot agree to any of the above conditions, you may not use this service nor any of the code and documentation generated.





    Kishor Makwana
    Software Engineer
    Insight Softech
    www.insightsoftech.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles