Need Help Again . . . In Over My Head

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#1

Man! I hate having to do this again, but I am in over my head and need some help.

The problem I am having is with the navigation menu. I am trying to get it to where I can have a drop down menu under my categories section and I just can not figure out how to get it to work. I have tried several tutorials and examples, but it just ain't sinking in. Basically I think I have just screwed the menu all up. When I try resizing the page, the menu just plain disappears when it gets down to phone size and I am at my wits end.

I think I screwed up the @media for the menu somewhere along the way, and I don't have a clue how to get the drop down for the "categories".

The HTML is:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <meta title="Unique, Collectable Assortment of Knives, Blades and Other Goodies For Those Who Want Something Different">
    <meta name="description" content="A growing collection of unique knives and blades and other goodies for those who have everything.">
    <link rel="stylesheet" href="screen3.css" media="screen,projection,tv">
    <title>Unique, Collectable Assortment of Knives, Blades and Other Goodies For Those Who Want Something Different | SharpStuff4Guys.com</title>
   
    <link rel="shortcut icon" href="favicon.png">
   
  </head>

<html>

<body>

<div id="contentWrapper">

    <h1>
        <a href="/index.php">
            SharpStuff4Guys
                <span><!-- image sandbag --></span>
        <small>Unique, Collectible Knives, Blades & More</small>
        </a>
    </h1>
   
    <div id="mainMenu">
        <?php include("mainMenu.php"); ?>
    <!-- #mainMenu --></div>


    <div id="shipping-bar">
        <?php include("ship-bar.php"); ?>
    </div>
   
        <div id="products">
            <h2>featured products</h2>
            <ul>
                <li>
                    <a href="/copper_spring_assist_knife.php">
                    <img src="/images/copper_spring_assist_knife.jpg" alt="Copper Spring Assist Knife" />
                            <h3>
                                "Stars Above" Copper Spring Assist Knife w/ Wolf Handle
                            </h3>
                            <span class="retail-price">
                                Retail Price: $26.49
                            </span><br>
                            <span class="price">
                                Your Price $21.45
                            </span>
                    </a>
                </li><li>
                    <a href="/baseball_style_vietnam_veteran_cap.php">
                    <img src="/images/vietnam_cap-1.jpg" alt="vietnam veteran cap" />
                        <h3>
                            Vietnam Veteran Cap w/ Adjustable Back
                        </h3>
                        <span class="retail-price">
                            Retail Price: $19.99
                        </span><br>
                        <span class="price">
                            Your Price: $ 8.00
                        </span>
                    </a>
                </li><li>
                    <a href="/death_stalker_fantasy_knife.php">
                    <img src="/images/death_stalker.jpg" alt="death stalker fantasy knife" />
                        <h3>
                            "Death Stalker" Fantasy Knife w/ Display Stand
                        </h3>
                        <span class="retail-price">
                            Retail Price: $78.49
                        </span><br>
                        <span class="price">
                            Your Price $59.73
                        </span>
                    </a>
                </li><li>
                    <a href="/biohazard_zombie_hack_n_slash.php">
                    <img src="/images/zombie_hack_set.jpg" alt="Biohazard Zombie "Hack 'n' Slash" 4 Pc Set" />
                        <h3>
                            Biohazard Zombie "Hack 'n' Slash" 4 Pc Set
                        </h3>
                        <span class="retail-price">
                            Retail Price: $109.99
                        </span><br>
                        <span class="price">
                            Your Price $62.52
                        </span>
                    </a>
                </li>
            </ul>

            <h2>new arrivals</h2>
            <ul>
                <li>
                    <a href="/guthook_fixed_blade_knife.php">
                    <img src="/images/guthook_knife.jpg" alt="7-in Fingergrip Guthook Fixed Blade Knife" />
                        <h3>
                            7" Fingergrip Guthook Fixed Blade Knife
                        </h3>
                        <span class="retail-price">
                            Retail Price: $15.99
                        </span><br>
                        <span class="price">
                            Your Price $6.46
                        </span>
                    </a>
                </li><li>
                    <a href="/damascus_wedge_knife.php">
                    <img src="/images/damascus_wedge.jpg" alt="8-in DAMASCUS WEDGE with OLIVE WOOD/HORN HANDLE" />
                        <h3>
                            8" Damascus Wedge with Olive Wood/Horn Handle
                        </h3>
                        <span class="retail-price">
                            Retail Price: $61.99
                        </span><br>
                        <span class="price">
                            Your Price $48.48
                        </span>
                    </a>
                </li><li>
                    <a href="/american_flag_knuckle_belt_buckle.php">
                    <img src="/images/american_flag_knuckle_belt_buckle.jpg" alt="american_flag_knuckle_belt_buckle" />
                        <h3>
                            Patriotic American Flag Knuckle Belt Buckle
                        </h3>
                        <span class="retail-price">
                            Retail Price: $15.99
                        </span><br>
                        <span class="price">
                            Your Price $12.06
                        </span>
                    </a>
                </li><li>
                    <a href="/boker_arbolito_soul.php">
                    <img src="/images/boker_arbolito_soul.jpg" alt="Boker Arbolito Soul II Buffalo Fixed Blade Knife" />
                        <h3>
                            Boker Arbolito Soul II Buffalo Fixed Blade Knife
                        </h3>
                        <span class="retail-price">
                            Retail Price: $249.00
                        </span><br>
                        <span class="price">
                            Your Price $146.34
                        </span>
                    </a>
                </li>
            </ul>

            <h2>best sellers</h2>
            <ul>
                <li>
                    <a href="/scorpion_handle_fantasy_bowie_knife.php">
                    <img src="/images/fantasy_bowie_knife.jpg" alt="Scorpion Handle Fantasy Bowie Knife" />
                        <h3>
                            Scorpion Handle Fantasy Bowie Knife w/Sheath
                        </h3><br>
                        <span class="retail-price">
                            Retail Price: $21.49
                        </span><br>
                        <span class="price">
                            Your Price $16.37
                        </span>
                    </a>
                </li><li>
                    <a href="/jolt_mini_stun_gun.php">
                    <img src="/images/jolt_mini_stun_gun.jpg" alt="JOLT 35,000,000* Mini Stun Gun - Black" />
                        <h3>
                            JOLT 35,000,000* Mini Stun Gun - Black
                        </h3><br>
                        <span class="retail-price">
                            Retail Price: $26.49
                        </span><br>
                        <span class="price">
                            Your Price $21.83
                        </span>
                    </a>
                </li><li>
                    <a href="/vietnam_commemorative_knife.php">
                    <img src="/images/vietnam_commemorative_knife.jpg" alt="Vietnam War 1960-1975 Commemorative Folding Knife" />
                        <h3>
                            Vietnam War 1960-1975 Commemorative Folding Knife
                        </h3>
                        <span class="retail-price">
                            Retail Price: $15.99
                        </span><br>
                        <span class="price">
                            Your Price $12.32
                        </span>
                    </a>
                </li><li>
                    <a href="/classic_lockback_folder_knife.php">
                    <img src="/images/classic_lockback_folder.jpg" alt="5-in Classic Lockback Folder" />
                        <h3><br>
                            5" Classic Lockback Folder
                        </h3><br />
                        <span class="retail-price">
                            Retail Price: $10.49
                        </span><br>
                        <span class="price">
                            Your Price $7.89
                        </span>
                    </a>
                </li>
            </ul>
        <!-- #products --></div>

    <div id="description">
        <p>If you are looking for a great place that offers a huge selection of bargin-priced knives, self defense products or
        collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking for
        fantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everything
        a guy could need to build an amazing collection and at bargin prices. Our selection of
        self-defense and security products, collectibles and survival gear has been hand-selected to satisfy
        the wants and needs of our customers. Each item in our inventory meets our rigid standards for
        durability, functionality and ease-of-use. Here at SharpStuff4Guys.com, we are building one of the
        most comprehensive selections of name-brand knives and combat accessories that grows every week. Our
        inventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name a
        few. We offer bargin priced Uzi knives, Swiss Army knives and many more, so finding the right
        blade for your personal collection couldn't be easier. In addition to our growing inventory of
        knives, SharpStuff4Guys inventory includes tactical gear and militaria. So whether you're
        looking a gift that will never be forgotten or adding to your own personal collection, you will be
        able to get what you need right here. Because we live in such turbulent times, we have packed our
        inventory with an amazing selection of self-defense and security products that can protect you
        if the need ever arises. Whether you're looking for a Mace pepper spray gun, a crime-stopping,
        4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personnel
        and self-defense instructors use and recommend right here at SharpStuff4Guys. We'd like to invite
        you to browse our ever growing selection of unique knives, tactical gear and everything else
        we offer. At SharpStuff4Guys, we are quite proud of our selection, and hope you enjoy exploring
        our website for whatever it is you need while saving a bundle in the process..</p>
       
    <!-- #description --></div>

   

    <div id="footer">
        <p>All contents &copy; 2016 SharpStuff4Guys. All rights reserved.</p>
    </div>

<!-- contentWrapper --></div>

<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=11046115; 
var sc_invisible=1; 
var sc_security="7b5bfd47"; 
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="website
statistics" href="http://statcounter.com/free-web-stats/"
target="_blank"><img class="statcounter"
src="//c.statcounter.com/11046115/0/7b5bfd47/1/"
alt="website statistics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->

</body>

</html>

Code (markup):

and my css looks like this:



/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

body {
    background:#BFCDE4;
}

#contentWrapper {
    max-width: 72em; /* h1 logo image width for legacy browsers */
    margin: 0 auto;
    overflow:hidden;
    background: #FFF;
    -webkit-box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    box-shadow:
        0 0 1px 1px #000,
        0 0 1.5em 0.1em #321;
    -webkit-border-radius:
        1em;
    border-radius:
        1em;
}

* html #contentWrapper {
    width:55em; /* IE6- can't do min/max-width, OH WELL! */
}

h1 {
    padding-left: 2em;
    font-size: 100%; /* prevent FF reverse inheritance bug */
    background: #0067A9;
    -webkit-border-radius:
        1em 1em 0 0;
    border-radius:
        1em 1em 0 0;
}

h1 a {
    position: relative; /* so we can absolute position span over this */
    display: block;
    padding: 40px 0; 
    /* 40px top + 40px bottom + 64px line-height == image height */
    text-decoration: none;
    font: bold 40px/44px arial,helvetica,sans-serif;
    color: #FFF;
}

h1 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: #0067A9 url(/images/header.jpg) center left no-repeat;
}

h1 small {
    display:block;
    font:bold 48%/120% arial,helvetica,sans-serif;   
}

#mainMenu {
    background: #DDEEFF;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

#mainMenu ul {
    list-style: none;
    padding-top: 0.5em;
    text-align: center;
}

#mainMenu li {
    display: inline;
    vertical-align: bottom;
}

#mainMenu a {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 0.25em;
    padding: 0.5em 1em;
    text-decoration:none;
    font: bold 95%/95% arial,helvetica,sans-serif;
    color: #000;
}

#mainMenu a:hover {
    color: #990000;
    text-shadow:
        0 0 2px #C60;
}

#shipping-bar {
    margin: 2em 0 1em 0;
    background: #FFF;
}

#shipping-bar p {
    padding: 0.4em 0 0.4em 0;
    text-align: center;
    font-size: 1.75em;
    text-decoration: none;
    font-weight: bold;
    color: #CC0000;
}

h2 {
    text-transform: uppercase;
    font-size: 1.5em;
    text-decoration: underline;
    margin-bottom: -0.5em;
    padding: 1.65em 0 1em 1em;
}

#products {
    float: left;
    overflow: hidden;
    width: 100%;
    padding: 1em 1.5em 0 0;
    background: #FFF;
}

#products ul {
    list-style: none;
    text-align: center;
    padding-bottom: 1em;
}

#products li {
    padding-left: 1em;
    display:inline;
    vertical-align:top;
}

#products a {
    width:231px;
    padding:1em;
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
    color:#FFF;
    -webkit-border-radius:1em;
    border-radius:1em;
    -webkit-transition:background 0.3s;
    transition:background 0.3s;
}

#products a:hover {
    background:#BFCDE4;
}

#products img {
    display: block;
    margin: 0px auto;
    width: 100%;
}

h3 {
    font-size: 1.1em;
    font-weight: bold;
    color: #0067A9;
    padding-bottom: 1em;
}

.retail-price {
    margin-top: 1em;
    font-size: 1em;
    color: #666;
}

.price {
    font-size: 1.35em;
    font-weight: bold;
    color: #CC0000;
}

#description {
    clear:both;
    margin: 1.5em 0.5em 1.5em 0;
    padding: 2em 1em 1em 1.5em;
}

#footer {
    text-align:center;
    padding:1em;   
    height: 2em;
    background: #0067A9;
}

#footer p {   
    color:#FFF;
}

#footer span {
  margin-right: 40px;
}

@media (max-width:50em) {
    body {
        min-width:192px; /* CSS3 possible, so let it go narrower */
    }
    #contentWrapper,
    #sidebar {
        float:none;
        width:auto;
    }
    #content,
    #sidebar {
        margin:0;
        padding:1em 0.5em 0;
    }
    h2 {
        padding-bottom:0.66em;
    }
    #products {
        padding:1em 0 0;
        margin:0 0.5em;
    }
    #products a {
        padding:0.5em;
    }
}

@media (max-width:660px) {
    h1 {
        text-align:center;
        padding:0;
    }
    h1 a {
        padding:0.33em 0.167em;
        font:bold 146%/45% arial,helvetica,sans-serif;
        line-height: 125%;
    }
    h1 span {
        display:none;
    }
}

@media (max-width:340px) {
    #products a {
        width:auto;
        margin:0 auto;
        -webkit-box-sizing:padding-box;
        box-sizing:padding-box;
    }
}

@media (max-width:52em) {
    #mainMenu ul {
        max-width:40em;
        padding-top:0.5em;
        margin:0 auto;
    }
}

@media (max-width:42em) {
    h1 {
        text-align:left;
        padding-left:0.25em;
        font-size:100%;
    }
    #mainMenuCheck + label {
        display:block;
        float:right;
        margin:-5.5em 0.5em 0 0;
        padding:0.5em;
        background:#420;
        border:0.25em solid #FFF;
        -webkit-border-radius:0.5em;
        border-radius:0.5em;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select: none;
    }
    #mainMenuCheck + label:before,
    #mainMenuCheck + label:after {
        display:block;
        content:"";
        width:2em;
        height:0.5em;
        border:solid #FFF;
        border-width:0.25em 0;
    }
    #mainMenuCheck + label:after {
        border-top:0;
    }
    #mainMenuCheck:checked + label {
        background:#840;
    }
    #mainMenuCheck + label:hover {
        background:#C40;
    }
    #mainMenu ul {
        display:none;
        overflow:hidden; /* wrap floats */
    }
    #mainMenuCheck:checked ~ ul {
        display:block;
    }
    #contentWrapper,
    #content,
    #extras {
        float:none;
        width:auto;
        margin:0;
    }
    #content,
    #extras {
        padding:1em 0.5em 0;
    }
    #extras .subsection {
        padding-top:1em;
        border-top:2px solid #A98;
    }
    #extras .subsection li {
        padding:0.5em 0;
    }
}

@media (max-width:28em) {
    h1 {
        font-size:180%;
    }
    #mainMenuCheck + label {
        font-size:75%;
        margin:-5em 0.5em 0 0;
    }
    #content .leadingPlate,
    #content .trailingPlate {
        float:none;
        max-width:100%;
        margin:0 auto 1em;
    }
}

Code (markup):

and I guess you may need to see my mainMenu.php code as well:



<label for="mainMenuCheck"></label>
        <ul>
            <li><a href="/index.php" class="current">Home</a></li>
            <li><a href="/shipping.php">Shipping</a></li>
            <li><a href="/returns.php">Returns</a></li>
            <li><a href="/back_orders.php">Back Orders</a></li>
            <li><a href="/privacy.php">Privacy Policy</a></li>
            <li><a href="/contact.php">Contact Us</a></li>
            <li><a href="/fixed_blades.php">Categories: Fixed Blades</a></li>
            <li><a href="/fantasy_knives.php">Fantasy Knives</a></li>
        </ul>

Code (markup):

If anyone is willing to help me out with these problems, I promise I will go away a while and give ya'll a break.

VanceVP, Jul 21, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#2

First off, unless you're gonna do anything else with that mainmenu-file, there's no point in having that as PHP - that could just as well just be a .html-file which you then include via php. That way, you don't need to parse the php file, you're just including the html from a different file.

That being said: you want this menu to be hidden as default, and show when you hover over it, or something like that? Am I understanding you correctly? And, when the screen size gets smaller, you want it to be a click on the "menu" for showing / hiding the menu? With a checkbox-hack checked) involved? I think perhaps you're over-thinking this a bit. And, depending on what you want exactly, you need to nest lists.

I made a short version here: https://jsfiddle.net/v2zve5ry/1/ - see if that works (that is just the hover / dropdown bit, nothing more)

PoPSiCLe, Jul 21, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#3

Thanks for your reply, PoPSiCLe.

Actually I do plan to expand the listings under my "categories" so that is the reason for mainMenu.php. I do not want to have to make changes on all the pages that will be part of this site. And oh crap! I did not realize that I could do the include with an html file. Guess its time to read up on using the 'include' in php.

What I would like for the menu to ultimately look like at desktop is like this:

I don't even know if this is even possible.

As for the menu resizing . . . below is what deathshadow did with the #mainMenu for that site. I have been trying to figure out how he made the menu show on desktop view, but then disappear when resized and replaced with what I guess is a menu symbol(?) in the upper right corner.

Like this:

I got half the problem taken care of (not sure how). The menu shows at desktop but completely disappears when sized down.

I hope this clarifies what I am asking about and/or trying to do.

My many thanks . . .

VanceVP, Jul 21, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#4

Yeah. What you need to do is create a label/checkbox element with either menu or hamburger icon or whatever you want it to look like, and when that is checked, allow for the menu to show (and hide when unchecked) That is basically just adding
<label for="menu_checkbox"><input type="checkbox" id="menu_checkbox"></label>
Code (markup):
before the actual menu, and then style it accordingly.
Something like this:
<label for="menu_checkbox"><input type="checkbox" id="menu_checkbox"></label>
<ul id="menu">
  <li>Menu item 1</li>
  <li>Menu item 2</li>
</ul>


//CSS
@media screen and (max-width: 40em) { //set the cut-off to where the menu becomes unreadably in its current form
 #menu {
  display: none;
 }
 #menu_checkbox:checked + #menu {
  display: block;
 }
}
Code (markup):
This is very simplified, mind.

PoPSiCLe, Jul 22, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#5

Thanks again PoPSiCLe for your response.

I tried your suggestion and it works beautifully, but with all due respect, but it does not exactly produce the results I was hoping for.

I was wanting to stay away from the checkbox and have the menu set up to automatically disappear and be replaced with the icon you mentioned above when it is resized to the smaller screens so that when a visitor clicks on the icon it then shows.

Believe it or not, I can get this menu to do everything EXCEPT what I want it to do and I just cannot figure out why. Its frustrating as hell.

Anyway, thanks again for your help. I do appreciate it.

VanceVP, Jul 22, 2016 IP

PoPSiCLe Illustrious Member

Messages:: 4,623

Likes Received:: 725

Best Answers:: 152

Trophy Points:: 470

#6

Yes, as I said, that example is the very BASIC example. You will of course have to add to it, to make it like you want it to be. For instance showing the hamburger icon. Which can either be made using containers and borders, or by using a symbol-font. Then you just hide the checkbox (visibility: hidden) and use the click on the label for changing the status of the checkbox.

PoPSiCLe, Jul 22, 2016 IP

qwikad.com Illustrious Member Affiliate Manager

Messages:: 7,279

Likes Received:: 1,696

Best Answers:: 31

Trophy Points:: 475

#7

Here's a basic example. Modify it anyway you want:

https://jsfiddle.net/ra3rL53a/20/

qwikad.com, Jul 22, 2016 IP

VanceVP Member

Messages:: 113

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 33

#8

Thank you gentlemen. I appreciate the help and suggestions. I will work with it and see if I can get to work. In the mean time, thank you for all your help. It is greatly appreciated.

VanceVP, Jul 22, 2016 IP

Log in or Sign up

Need Help Again . . . In Over My Head

VanceVP Member

PoPSiCLe Illustrious Member

VanceVP Member

PoPSiCLe Illustrious Member

VanceVP Member

PoPSiCLe Illustrious Member

qwikad.com Illustrious Member Affiliate Manager

VanceVP Member

Useful Searches