Announcement

Collapse
No announcement yet.

freebie: popout section aware nav.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #61
    i look forward to see any cool menus that people have designed with this.

    note that in the code i gave to fibby that was posted, the only real difference was the database connection string, its the same for each version otherwise.

    for those people who's brains are exploding with the complexity of this, i'll be turning the first post, into a tutorial, for all versions, with nice pics, soon.

    thanks fib, for prompting me to make this fix.

    Comment


      #62
      no - thank YOU(!!)
      Chris Adams

      Comment


        #63
        I have updated the first post, and added a downloadable pack containing everything you'll need, to make it happen.

        No longer does this navigation use actinic_main.php. Instead, templates in Actinic are used. I urge everyone to use this technique, over the actinic_main.php idea, its much more stable, and easier to edit.

        Comment


          #64
          more uses than just left hand navs:

          how about replacing the sitemap?
          http://www.skateasylum.co.uk/acatalog/sitemap.html

          ...its not beautiful, but it'll do.

          Comment


            #65
            it's a damn sight nicer than the standard Actinic sitemap, Gabe!
            Nice one
            Tracey

            Comment


              #66
              It works a treat Gabe. Thanks for all the effort!

              The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.

              I have it up and running here (Editted: Re-moved Link)

              Slowly modifying the CSS to get the look I want, so don't focus on the style just yet.

              Ultimately, I want the Subsections to be hidden until a hover, so I'll keep you posted on it's progress.

              Army Gore-tex
              Winter Climbing Mitts
              webD's Blog: Website design, SEO and other ramblings…
              Twitter LinkedIN

              If you think a post is good, rate it!

              Find the answers in the Knowledge Base | Have you read the User Guides

              Comment


                #67
                Rich - when I click on "parachutes" from the home page the link to parachutes disappears from the list when in the section (white on white)


                Bikster
                SellerDeck Designs and Responsive Themes

                Comment


                  #68
                  I know:

                  Originally posted by DenbighArmySurp View Post
                  The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.


                  Gabe, It's actually the Current Section and the Parent Section that is white on white. I've not moded any of the code that would give that result, just a few background colour changes and a:hover in the CSS. Can you shed any light?

                  Has anyone else implemented this and are you seeing the same issue?

                  I'm working on an a:active element as we speak... type... whatever...

                  Army Gore-tex
                  Winter Climbing Mitts
                  webD's Blog: Website design, SEO and other ramblings…
                  Twitter LinkedIN

                  If you think a post is good, rate it!

                  Find the answers in the Knowledge Base | Have you read the User Guides

                  Comment


                    #69
                    Originally posted by DenbighArmySurp View Post
                    It works a treat Gabe. Thanks for all the effort!

                    The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.

                    I have it up and running here

                    Slowly modifying the CSS to get the look I want, so don't focus on the style just yet.

                    Ultimately, I want the Subsections to be hidden until a hover, so I'll keep you posted on it's progress.
                    ah yes sorry. the css example i gave was made before the '_selected' addition to the code. post yours when you're done?

                    try making styles for:
                    HTML Code:
                    .li1_selected { }
                    .li1_selected a { }
                    .li2_selected { }
                    .li2_selected a { 

                    Comment


                      #70
                      here is an example of it running with simple styles for these elements:
                      http://www.interact-studio.co.uk/aca...r_Flavour.html

                      Comment


                        #71
                        Heres the CSS I'm currently Running at www.denbigharmysurplus.co.uk:

                        Code:
                        /* php nav */
                        .navcontainerment {
                        	font-size: 12px;
                        }
                        .navcontainerment a{
                        	color: #FFFFFF;
                        	text-decoration: none;
                        }
                        .navcontainerment ul{
                        	list-style-type: none;
                        	padding: 0px;
                        }
                        
                        .ul1 {
                        	font-size: 12px;
                        	margin: 0px;
                        	padding: 0px;
                        }
                        .li1 {
                        	background-color: #003300;
                        	padding: 4px;
                        	border-bottom-width: 1px;
                        	border-bottom-style: solid;
                        	border-bottom-color: #CCFF66;
                        	font-weight: normal;
                        }
                        .ul2 {
                        	font-size: 11px;
                        	margin: 0px 0px;
                        	padding: 0px;
                        	border-top-width: 1px;
                        	border-bottom-width: 1px;
                        	border-top-style: solid;
                        	border-bottom-style: solid;
                        	border-top-color: #000000;
                        	border-bottom-color: #000000;
                        }
                        .li2 {
                        	background-color: #CCFF66;
                        	padding: 3px 0px 3px 8px;
                        	font-weight: normal;
                        	border-bottom-width: 1px;
                        	border-bottom-style: solid;
                        	border-bottom-color: #003300;
                        }
                        
                        .li2 a:hover {
                        	color: #000000;
                        	
                        }
                        
                        .li1_selected {
                        	background-color: #003300;
                        	
                        }
                        
                        .li2_selected {
                        	color: #CCFF66;
                        	background-color: #003300
                        }
                        .li2_selected a {
                        	color: #CCFF66;
                        	background-color: #003300;
                        	padding: 0px 0px 0px 8px;
                        }
                        
                        .li2 a {
                         color:#222;
                        }
                        It Inlcudes the '_selected' elements to remove the white on white problem.

                        Army Gore-tex
                        Winter Climbing Mitts
                        webD's Blog: Website design, SEO and other ramblings…
                        Twitter LinkedIN

                        If you think a post is good, rate it!

                        Find the answers in the Knowledge Base | Have you read the User Guides

                        Comment


                          #72
                          if Actinic Towers want to talk about corporate licensing for V10, then you need to talk to my agent.

                          Comment


                            #73
                            Originally posted by DenbighArmySurp View Post
                            Heres the CSS I'm currently Running at www.denbigharmysurplus.co.uk:

                            It Inlcudes the '_selected' elements to remove the white on white problem.
                            can i suggest this instead?
                            HTML Code:
                            /* php nav */
                            .navcontainerment {
                            	font-size: 12px;
                            }
                            .navcontainerment a{
                            	color: #FFFFFF;
                            	text-decoration: none;
                            }
                            .navcontainerment ul{
                            	list-style-type: none;
                            	padding: 0px;
                            }
                            
                            .ul1 {
                            	font-size: 12px;
                            	margin: 0px;
                            	padding: 0px;
                            }
                            .li1 {
                            	background-color: #003300;
                            	padding: 4px;
                            	border-bottom-width: 1px;
                            	border-bottom-style: solid;
                            	border-bottom-color: #CCFF66;
                            	font-weight: normal;
                            }
                            .ul2 {
                            	font-size: 11px;
                            	margin: 0px 0px;
                            	padding: 0px;
                            	border-top-width: 1px;
                            	border-bottom-width: 1px;
                            	border-top-style: solid;
                            	border-bottom-style: solid;
                            	border-top-color: #000000;
                            	border-bottom-color: #000000;
                            }
                            .li2 {
                            	background-color: #CCFF66;
                            	padding: 3px 0px 3px 8px;
                            	font-weight: normal;
                            	border-bottom-width: 1px;
                            	border-bottom-style: solid;
                            	border-bottom-color: #003300;
                            }
                            
                            .li2 a:hover {
                            	color: #000000;
                            	
                            }
                            
                            .li1_selected {
                            	background-color: #003300;
                            	padding: 4px;
                            	border-bottom-width: 1px;
                            	border-bottom-style: solid;
                            	border-bottom-color: #CCFF66;
                            	font-weight: normal;		
                            }
                            
                            .li2_selected {
                            	color: #CCFF66;
                            	background-color: #003300
                            	padding: 3px 0px 3px 8px;
                            	font-weight: normal;
                            	border-bottom-width: 1px;
                            	border-bottom-style: solid;
                            	border-bottom-color: #003300;	
                            }
                            .li2_selected a {
                            	color: #CCFF66;
                            	background-color: #003300;
                            }
                            
                            .li2 a {
                             color:#222;
                            }

                            Comment


                              #74
                              Originally posted by gabrielcrowe View Post
                              can i suggest this instead?
                              You can suggest what ever you want, you're officially my Hero

                              I'd only just noticed the borders and was about to change the CSS, but my Fat fingures obviuosly don't type as quick as your slender digits.

                              Army Gore-tex
                              Winter Climbing Mitts
                              webD's Blog: Website design, SEO and other ramblings…
                              Twitter LinkedIN

                              If you think a post is good, rate it!

                              Find the answers in the Knowledge Base | Have you read the User Guides

                              Comment


                                #75
                                Here is my css from:
                                http://www.interact-studio.co.uk/aca...r_Flavour.html

                                Click around the major sections to see the 'side tab' effect it adds to the site.

                                HTML Code:
                                .navcontainerment ul {
                                	padding: 0px;
                                	list-style-type: none;
                                	margin-top: 0px;
                                	margin-right: 0px;
                                	margin-bottom: 0px;
                                	margin-left: 10px;
                                }
                                
                                .navcontainerment a {
                                	font-size: 12px;
                                	color: #000000;
                                	text-decoration: none;
                                }
                                
                                .li1 {
                                	border-right-width: 1px;
                                	border-right-style: solid;
                                	border-right-color: #333333;
                                }
                                .li1_selected {
                                	font-weight: normal;
                                	color: #888;
                                	list-style-type: square;
                                	list-style-position: inside;
                                	padding: 5px;
                                	background-color: #FFFFFF;
                                	border-top-width: 1px;
                                	border-bottom-width: 1px;
                                	border-left-width: 1px;
                                	border-top-style: solid;
                                	border-bottom-style: solid;
                                	border-left-style: solid;
                                	border-top-color: #333333;
                                	border-bottom-color: #333333;
                                	border-left-color: #333333;
                                }
                                
                                
                                .li2_selected {
                                	font-weight: normal;
                                	color: #000000;
                                	list-style-type: square;
                                	list-style-position: inside;
                                }

                                Comment

                                Working...
                                X