visual css sitemaps

This is a discussion on "visual css sitemaps" within the Web Page Design section. This forum, and the thread "visual css sitemaps are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Aug 21st, 2007, 14:26
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,325
Blog Entries: 12
Thanks: 1
Thanked 4 Times in 4 Posts
visual css sitemaps

Hi all,

I was wondering if anyone has had any experiance with creating visual css sitemaps.

I am looking at creating something along the lines of Scott Jehl's visual css/html site map and was wondering if anyone has had success in implementing something like this.

Ideally I want this solution, but with the ability to roll up the sitemap, as our site is pretty big!

Anyone got anything that they can show me?

Cheers for any assistance.

Stew
__________________
WelshStew
Lead Administrator

tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Opera 9.5 Released ! (Jun 12th, 2008)
Reply With Quote

  #2 (permalink)  
Old Aug 21st, 2007, 14:30
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: visual css sitemaps

Hmmm ... it looks pretty straight forward to me?! Did you copy the code at the bottom of that page?

What does your code look like?!
Reply With Quote
  #3 (permalink)  
Old Aug 21st, 2007, 15:07
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,325
Blog Entries: 12
Thanks: 1
Thanked 4 Times in 4 Posts
Re: visual css sitemaps

I can get it to look like the example, but just can't get the functionality to roll up and down when you click on the boxes. i.e. when you click on portfolio I want all that is underneath it to dissappear

My page code is below and css and js for the site map is per the demo on Scott's site.

Code: Select all
<%@LANGUAGE="VBSCRIPT"%>
<!-- #include virtual="/template/includes/1constants.asp" -->
<%
    ' set the title element for the current page
    strPageTitle = "Test sitemap"
    ' set left hand menu for the current page
    intMenuTopId = 101        
    intMenuTopSubId = 106    
    intMenuSideExpId = 111    
    intMenuSideId = 114        
%>
<!-- #include virtual="/template/includes/svrfunctions.asp" -->
<!-- #include virtual="/template/includes/definenav.asp" -->
<!-- #include virtual="/template/includes/2doctypehtml.asp" -->
<!-- #include virtual="/template/includes/3.1openhead.asp" -->
<meta name="description" content="test sitemap"/>
<meta name="keywords" content="test sitemap"/>
<link rel="stylesheet" type="text/css" href="/css/styleMap.css" />
<script src="/script/styleMap.js" type="text/javascript" charset="utf-8"></script>
<!-- #include virtual="/template/includes/3.2closehead.asp" -->
<body>
<!-- #include virtual="/template/includes/4layout.html" -->
<!-- #include virtual="/template/includes/top_navigation.asp" -->
<!-- #include virtual="/template/includes/6layout.asp" -->
<!-- #include virtual="/template/includes/7leftnav.asp" -->
<!-- #include virtual="/template/includes/8layout.asp" -->
<!-- page content -->
<div id="contain">

    <ul id="sitemap">

        <li><div><a href="#">Home</a></div>

            <ul>

                <li><div><a href="#">About</a></div></li>

                <li><div><a href="#">Portfolio</a></div>

                    <ul>

                        <li><div><a href="#">Print</a></div></li>

                        <li><div><a href="#">Web</a></div>

                            <ul>

                                <li><div><a href="#">Sites</a></div></li>

                                <li><div><a href="#">Apps</a></div></li>

                            </ul> 

                        </li>

                        <li><div><a href="#">Video</a></div></li>

                        <li><div><a href="#">Animation</a></div></li>

                    </ul>

                </li>

                <li><div><a href="#">Contact</a></div></li>

            </ul>

        </li>

    </ul>

 </div>    

<!-- /page content -->
<!-- #include virtual="/template/includes/9layout.asp" -->
<!-- #include virtual="/template/includes/10footer.asp" -->
<!-- #include virtual="/template/includes/11layout.asp" -->
At this point I'm looking at a show/hide div layer for each 'block' of the sitemap, but that won't lend itself well to when the js is turned off.

Any ideas on how to achieve an 'acordian / sliding doors' type effect onto this visual sitemap?
__________________
WelshStew
Lead Administrator

tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Opera 9.5 Released ! (Jun 12th, 2008)
Reply With Quote
  #4 (permalink)  
Old Aug 21st, 2007, 16:49
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: visual css sitemaps

Just to clear things up ... the original (the one you linked) doesn't do this right?
Reply With Quote
  #5 (permalink)  
Old Aug 21st, 2007, 16:58
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,325
Blog Entries: 12
Thanks: 1
Thanked 4 Times in 4 Posts
Re: visual css sitemaps

Not that I can see.
__________________
WelshStew
Lead Administrator

tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Opera 9.5 Released ! (Jun 12th, 2008)
Reply With Quote
Reply

Tags
css, javascript, sitemaps

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
SEO and Sitemaps prizm Search Engine Optimization (SEO) 5 Nov 3rd, 2007 22:49
sitemaps octoberward Starting Out 3 Aug 2nd, 2007 15:11
Sitemaps needed qwertypunk Web Page Design 7 Aug 14th, 2006 16:39


All times are GMT. The time now is 03:23.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43