我們理念中的菜單都是矩形的,不是橫向排列就是縱向排列,這里我們打破了常規的思維,把菜單做成圓形的。
在這里我們不得不克服幾個問題:
如何定義html如何懸停定位菜單元素
在此之前先看一下最終效果是怎樣的,DEMO放在前面主要是增加大家閱讀的興趣。
下面就讓我們開始今天的教程吧
第一步:構建HTML
在編寫HTML之前,必須先了解將要構建的結構是怎么樣的,下圖表示要構建的結構:
每個頂部的矩形框都與下面大圓中的一個小圓相聯系,當把鼠標懸停在矩形框上時,對應的小圓旋轉到菜單的頂部。而實現這個功能的難點就是怎樣實現懸停在一個元素上從而影響另一個元素的表現狀態。
為解決這個問題,讓我們看看下面的HTML:
新聞熱點
疑難解答