PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Sep 30, 2020 3:28 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 12 posts ] 
Author Message
PostPosted: Fri Sep 12, 2014 11:16 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom

We are using this, as a template for a new menu.
We've alter the colours and style, but one thing we notice is you can have a menu button with no dropdown, but the Text will not hyperlink to a page.

How can this code be altered to enable particular links to go to pages?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 11:36 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom

Someone has said this works, but they have failed to put a URL into the hyperlink to prove it.
When I do this, it doesn't work.

Show do I get a hyperlink to work on here, while the other dropdowns still work?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 12:16 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
http://jsfiddle.net/xC47v/6/

Note the example isn't working on the Fiddle itself, but works fine elsewhere.

_________________


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 1:00 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Have a look at the attached - see if you can get Googel to work, the other menus to dropdown and send back, or just tell me the little bits you adjusted to fix.

As I'm stumped!


Attachments:
File comment: This is the full version I have made, with a google link and it fails.
HorizontalDropDownMenu.rar [14.31 KiB]
Downloaded 390 times

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 2:04 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
You didn't incorporate the changes I had posted on jsFiddle. You modified the $menuItems selector from 'a' to 'a.dropdown', which doesn't exist. You were making changes do your cbpHorizontalMenu.js file while the index file was still pointing to the .min.js version. You added an unnecessary closure to the JS file (that wasn't being called) that would have run the whole thing twice. I have attached a version with all requisite fixes.


Attachments:
horizontal-nav.zip [16.71 KiB]
Downloaded 380 times

_________________
Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 2:18 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
You genius. I still am not exactly sure where I messed it, but it's perfect now.

While you are on - do you happen to see a way to make the "wide" black DIV stay inside a container "innerbox" of the page?

It resides in a innerbox that is:

950px wide
Margin left auto
margin right auto.

I know it's designed to be nice on mobile, but I am sure I can alter any setting needed for mobile. The thing is, we use a wide background image and it covers it. would be nice if it was inside "innerbox"....?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 2:43 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
There's no black div on mine that I can see. Assuming you mean the submenu container div, just add the following rule:

Syntax: [ Download ] [ Hide ]
.cbp-hrsub {
        max-width: 900px;
}

_________________


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 3:28 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Apologies. I've altered all the colouring.
For your sake, let's say the dark blue div.
If you do this:

Syntax: [ Download ] [ Hide ]
.cbp-hrmenu {
        width: 100%;
}

.cbp-hrsub {
        max-width: 950px;
margin-left: auto;
margin-right: auto;
}

It shoves over to the left.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 3:51 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
It's absolutely positioned, so you need to set relative positioning on .container

_________________


Top
 Profile  
 
PostPosted: Fri Sep 12, 2014 4:26 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Perfect. Tho now (and before actually) when you click on a menu, the submenu expands in mobile and pushes it all out.
Seeing as it's "max-width", I didn't think that would happen.
I don't recall setting any odd widths on the inner areas.

Syntax: [ Download ] [ Hide ]
.container
{
position: relative;
}

.cbp-hrmenu {
        width: 100%;
}

.cbp-hrsub {
        max-width: 950px;
margin-left: auto;
margin-right: auto;
}

/* general ul style */
.cbp-hrmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
}

.menulink {
font-family: impact, arial;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
display: inline-block;
}


.menulink:hover {
color: #ff5500;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        max-width: 75em;
        margin: 0 auto;
        padding: 0 1.775em;
}

.cbp-hrmenu > ul > li {
        display: inline-block;
background-color: #5F5F5F;
}

.cbp-hrmenu > ul > li > a {
        font-weight: normal;
        padding: 0.6em 1em;
        color: #999;
        display: inline-block;
text-decoration: none;
font-family: impact, arial;
text-transform: uppercase;
font-size: 18px;
color: #ffffff;

}

.cbp-hrmenu > ul > li > a:hover {
        color: #ff5500;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
        color: #fff;
        background: #000000;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
        display: none;
        position: absolute;
        background: #000000;
opacity: 0.87;
        width: 100%;
        left: 0;
}

.cbp-hropen .cbp-hrsub {
        display: block;
        padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
        width: 28%;
        float: left;
        padding: 0 0.6em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
        content: " ";
        display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
        clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
        line-height: 2em;
}

.cbp-hrsub h4 {
        color: #afdefa;
        padding: 0.6em 0 0.0em;
        margin: 0;
        font-size: 110%;
        font-weight: normal;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

        .cbp-hrmenu {

                font-size: 80%;
        }

}

@media screen and (max-width: 43em) {

        .cbp-hrmenu {
                font-size: 120%;
                border: none;
        }

        .cbp-hrmenu > ul,
        .cbp-hrmenu .cbp-hrsub-inner {
                width: 100%;
                padding: 0;

        }

        .cbp-hrmenu .cbp-hrsub-inner {
                padding: 0 2em;
                font-size: 75%;
        }

        .cbp-hrmenu > ul > li {
                display: block;
border-bottom: 1px solid #000000;
        }

        .cbp-hrmenu > ul > li > a {
font-size: 17px;
                display: block;
                padding: 0.5em 1em;
        }

        .cbp-hrmenu .cbp-hrsub {
                position: relative;
        }

        .cbp-hrsub h4 {
                padding-top: 0.6em;
        }

}

@media screen and (max-width: 36em) {
        .cbp-hrmenu .cbp-hrsub-inner > div {
                width: 100%;
                float: none;
                padding: 0 2em;
        }
}

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Sep 15, 2014 4:31 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Fixed - I'd removed the link to default.css.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Sep 15, 2014 4:41 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Can you see in the CSS how to get the menu to be left aligned in the menu or container div. I've tried text-align: left, etc, but nothing seems to work.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 12 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 10 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group