Results 1 to 3 of 3

Thread: change the button for css menu

  1. #1
    Join Date
    Mar 2014
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default change the button for css menu

    1) Script Title: Responsive Iconic Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...e_iconic_menu/

    3) Describe problem: Im just wanting to change the image that is clicked to activiate the menu...I had asked this question for a similar menu and the answers given worked, but they did not like the menu...not what they wanted...

    So...Ive messed around and got it to change the image, but then the menu does not work.

    for example...want to change the the "four bar" button to another button.

    Thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can modify the toggler (the label element) so it uses an image, for example. Depending on the dimensions of the image, however, you'll also need to make additonional changes to the CSS apart from the HTML markup.. Below assumes you'll be using an image with dimensions 75px in width by 85px in height. The changes you should make from the default code are highlighted in red, while the code you should remove are in gray:

    Code:
    <style>
    .iconicmenu {
        position: relative;
        height: 85px;
        overflow: hidden;
        }
    
    .iconicmenu, .iconicmenu * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
    
    .iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        }
    
    .iconicmenu > label { /* Main label icon to toggle menu state */
        z-index: 1000;
        display: block;
        position: absolute;
        width: 75px;
        height: 85px;
        float: left;
        top: 0;
        left: 0;
        background: white;
        border: 6px solid black; /* border color */
        border-width: 6px 0;
        cursor: pointer;
        -moz-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in; /* transition for flipping label */
        }
    
    .iconicmenu > label::after { /* inner stripes inside label */
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 18%;
        top: 19%;
        left: 0;
        border: 6px solid black; /* border color */
        border-width: 6px 0;
        -moz-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in; /* transition for flipping label */
        }
    
    .iconicmenu ul { /* UL menu inside container */
        margin: 0;
        padding: 0;
        position: absolute;
        margin-left: 75px;
        background: #eee;
        left: -100%; /* hide menu intially */
        height: 40px; /* height of menu */
        font: bold 14px Verdana;
        text-align: center;
        list-style: none;
        opacity: 0;
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        -moz-perspective: 10000px;
        perspective: 10000px;
        -moz-transition: all 0.5s ease-in;
        -webkit-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in; /* transition for animating UL in and out */
        }
    
    .iconicmenu li {
        display: inline;
        margin: 0;
        padding: 0;
        }
    
    .iconicmenu ul label { /* label button inside UL to close menu */
        cursor: pointer;
        position: relative;
        height: 100%;
        text-align: center;
        }
    
    .iconicmenu ul label::after { /* label button x */
        content: "x";
        display: inline-block;
        line-height: 14px;
        color: white;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        width: 20px;
        height: 20px;
        background: black;
        font-size: 18px;
        margin: 5px;
        margin-top: 10px;
        -moz-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        }
    
    .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
        -moz-transform: rotatey(180deg);
        -ms-transform: rotatey(180deg);
        -webkit-transform: rotatey(180deg);
        transform: rotatey(180deg); /* flip labels vertically onMouseover */
        }
    
    .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
        border-color: darkred; /* highlight color of main menu label onMouseover */
        }
    
    .iconicmenu input[type="checkbox"]:checked ~ ul {
        left: 8px; /* Animate menu into view */
        opacity: 1;
        -moz-box-shadow: 1px 1px 5px gray;
        -webkit-box-shadow: 1px 1px 5px gray;
        box-shadow: 1px 1px 5px gray;
        }
    
    .iconicmenu li a {
        display: block;
        float: left;
        text-align: center;
        text-decoration: none;
        color: black;
        margin: 0;
        padding: 10px;
        padding-right: 15px;
        height: 100%;
        }
    
    .iconicmenu li a:hover {
        background: black;
        color: white;
        }
    
    /* ----------------------------- CSS Media Queries ----------------------------- */
    
    /*
    These rules control which portions of the menu gets shown when the screen size is below a certain width.
    By default 2 stages are defined depending on browser screen width.
    */
    
    @media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
        .iconicmenu input[type="checkbox"]:checked ~ label {
            display: none;
            }
        .iconicmenu input[type="checkbox"]:checked ~ ul {
            margin-left: 0;
            }
        }
     
    @media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
        .iconicmenu {
            overflow: visible;
            }
        .iconicmenu ul {
            height: auto;
            }
        .iconicmenu ul li {
            min-width: 200px;;
            display: block;
            }
        .iconicmenu ul li a {
            float: none;;
            text-align: left;
            }
        }
    
    </style>
    
    <body>
    
    <div class="iconicmenu">
    <input type="checkbox" id="togglebox" />
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
    <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    <li><a href="http://www.javascriptkit.com">JavaScript</a></li>
    <li><label for="togglebox"></label></li>
    </ul>
    <label class="toggler" for="togglebox"><img src="ps4.gif" style="width:75px; height: 85px" /></label>
    </div>
    
    </body>
    DD Admin

  3. #3
    Join Date
    Mar 2014
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the answer and detailed instructions. I will be following them and looking forward to it working ASAP when I can work on my site some more. Thanks again.

Similar Threads

  1. Radio button does not change value?
    By Ant469 in forum JavaScript
    Replies: 4
    Last Post: 12-31-2010, 12:38 PM
  2. Resolved change link button
    By davelf in forum Flash
    Replies: 0
    Last Post: 03-11-2010, 09:27 AM
  3. Change background of a button when button active
    By inadcod in forum JavaScript
    Replies: 1
    Last Post: 10-29-2008, 11:34 AM
  4. 'go' button location change
    By MonteChristo in forum JavaScript
    Replies: 1
    Last Post: 02-14-2008, 11:01 PM
  5. How to change XP button look to my own button in Switch menu II?
    By gazanson in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-13-2006, 01:39 PM

Bookmarks

Posting Permissions

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